|
|
Javascript Multiple Rollovers From One Link
Getting multiple images to rollover from a single link is a lot easier than you might think. You start with a standard rollover link such as this:
<a href="http://www.codetoad.com" onMouseOver=image1name.src="images/button1b.gif"
onMouseOut=image1name.src="images/button1a.gif">
<img src="button1a.gif" name ="image1name" border=0></a>
| |
|
We've named then image 'image1name' and set it's source to 'images/button1a.gif'. When the user rolls over the onMouseOver event is called, which changes the source to 'images/button1b.gif'.
When the user moves the mouse away from the image, the onMouseOut event is called and the source is set back to the original 'images/button1a.gif' (of course, there's no requirement to go back to the original, it could just as well go to a totally different image).
Now, to affect two images at once, we simply add another onMouseOver and onMouseOut action within the tag, as follows:
<a href="http://www.codetoad.com" onMouseOver=imagename.src="images/button1b.gif"
onMouseOver=image2name.src="images/button2b.gif"
onMouseOut=imagename.src="images/button1a.gif"
onMouseOut=image2name.src="images/button2a.gif">
<img src="button1a.gif" name ="image1name" border=0></a>
<img src="button2a.gif" name ="image2name" border=0>
| |
|
Now rolling over the first image will change both images at the same time - simple!
| |
