Now, we're going to add the code for the image mouseover effect. This part can be tricky:
<a href="about.html" onMouseOver="change('images/about_on.jpg');" onMouseOut="change('images/about_off.jpg')"> <img src="images/about_off.jpg" name="picture" border="0"></a>
What we have here is a simple link that takes you to "about.html" when clicked. The "a" in the beginning of the link tells the browser this is a link we are creating. The "href=" part, is an attribute of the link. It's an attribute that determines the URL the link sends us to.
The code above for the image and link has an image, and somewhere in there you'll see an attribute as follows:
That tells us that the name of this image is "picture" - which is perfect for our function. The next attribute of the link is the "onMouseOut" attribute. It's just like the last attribute, and as such it calls a function for us. Only this time it's activated when the user's mouse comes OFF of the object (image, in this case). In that case, the URL we have specified is that of the original image we've turned into a link here.
Here's is the code for the entire page:
Now, assuming you've uploaded your original, plain image to the specified URL and uploaded your more flashy, mouseover image to the address specified, then all should be well and good. You can modify the URLs in this script to reflect the location of your images - just make sure not to delete any double/single quotes - if you do an error may follow.