| OK! This is Javascript, and this is the stuff that makes the
images morph and change on my site. Wanna learn how it works? I write this stuff out
by hand in a text editor, and rely on Cut & Paste for dropping in the main bulk of
the code, which I then modify as needed. Here's the basic default code I usually
start with, play around with it and see what you can learn. I'll include some handy
links at the end of this document, OK?
Alright, let's get started. For the Javascript stuff, this is my basic code, which
you can modify at will, guilt free, as long as my credits are not removed. This
script is designed to take two different images and provide an alternate image for
each, but you could easily scale it up for a bigger project. The script is broken
up into three sections, the first is the error trapping code, which is identical
on every script. The second is where we fill the arrays with the images, and
also the "name" of the images. The last bit is the actual swap function itself,
it's really rather simple. Here goes!
<SCRIPT LANGUAGE="JavaScript">
<!--DocOzone's Javascript code, copyright 1998
// Feel free to borrow and modify this code,
// but be sure leave this credit in the source!
// Your pal, -Dr. Thaddeus Ozone-
// .http://www.ozones.com/
window.onerror=null;
// that was to turn off error reporting...
if (document.images) {
names = new Array( "zero" , "one" );
buttons = new Array(4);
for (m=0; m<=3; m++) {
buttons[m] = new Image(); }
buttons[0].src = "zeroA.jpg";
buttons[1].src = "oneA.jpg";
buttons[2].src = "zeroB.jpg";
buttons[3].src = "oneB.jpg"; }
function swap(des,num) {
if (document.images) {
document.images[names[des]].src = buttons[num].src; }}
// close the comment tag, this hides the script from really old browsers! -->
</SCRIPT>
Now, this script goes inside the <head></head> tags, and we access it from
the HTML part like this...
<a href="zero.shtml"
onMouseover="swap(0,2)"
onMouseout="swap(0,0)"><img src="zeroA.jpg" name="zero"></a>
<a href="one.shtml"
onMouseover="swap(1,3)"
onMouseout="swap(1,1)"><img src="oneA.jpg" name="one"></a>
The window.status statement must always be followed by "return true". Why? I never asked,
it just does, go figger. For changing the window.status text at the same time, or
maybe do two functions at once, we seperate the functions by a semi-colon, like this...
<a href="one.shtml"
onMouseover="swap(1,3);
window.status='This first line displays in the status line below';
return true"
onMouseout="swap(1,1)"><img src="oneA.jpg" name="one"></a>
You gotta remember, we always start counting from 0 (zero), so the names
array starts counting there. As long as the "name" attribute is set in the
<img> tag, you can move these images anywhere in your document, the code is
not dependent on placement of the images. The "swap" function has those two
variables, 'des' and 'num'. The 'des' part refers to the 'names' array, and
tells the function which image you want the change to affect, and the 'num'
part tells it which image from the 'buttons' array you want to put there.
Simple, no? Have fun with it!
Your pal, -doc- (April 10th, 1998)
|
