| Now, let's break it down so you can understand what you are doing:
onbutton = new Image(54, 54);
onbutton.src = "buttonon.gif";Here you are creating an image object called onbutton.
At this point you can call it anything you want as long as it's not the same
as anything else on the page. The numbers between the parentheses are
(width, height). It is important for them to be the same as the image you are
replacing for a smooth switch. If not the browser will resize it to fit and in
Communicator4 it is noticeable. with "onbutton.src" you are telling the browser
the path to the image you want to replace with. If it is in a folder called pictures
for instance, then the path would be pictures/buttonon.gif.
This is the link to the page you want to go to
onMouseover="document.mybutton.src=onbutton.src;onMouseover, of course, is telling the browser that you want to do something when the mouse is over the link. document.mybutton.src refers to the name of the original image.
window.status='Hey! I\'m on!'; return true"This is a nice touch. It puts a little message in the status bar when you mouse over and it goes away when you mouse out.
onMouseout="mybutton.src='buttonoff.gif'">
onMouseout is telling the browser that you want something to happen when the mouse moves away from the link. Then again you refer to the name of the image source and assign the original filename to switch back.
In the normal HTML code for the image, you'll notice that there is a NAME and a BORDER attribute. You need to give each image a different name and setting the border to zero will prevent the blue link outline.
|