Tutorials - JavaScript - Lesson 8 - Simple Rollover
Many website use rollovers both for design reasons and also to provide
extra information about certain topics. A lot of these sites use reams and
reams of code where it is not really necessary, however it is possible to
do a rollover with just 4 lines of code placed in the <head>
tags:
function rollOver(file, tag)
{
document.images[tag].src = file;
}
To get the rollover function attached to the image we need to add some
script before the <img> tags:
<a onMouseOver="rollOver('examples/image2.gif',
'img1')" onMouseOut="rollOver('examples/image1.gif',
'img1')" href="#"> <img border="0" src="examples/image1.gif"
width="100" height="33" border="0"
name="img1"></a>
This code attached the function to the image, then sets the image
paths (note that the mouseover image is first), then the name. It
is important to remember to name the image in the <img>
tags as well or you will get a JavaScript error. In this example the image
is called "img1", if you had a second image, you could name that
"img2" etc.
And here's the result:
Please view the Codebank for more tips and tricks
back
| 
