<mouseovers>
At this point, I'm assuming you're fairly decent at writing html. If not, read the html pages first! If so, here we go on the wild ride that is image mouseovers! Go ahead and float your mouse over the arrow below and see how blinky it is.

<picture mouseover>


First, you need at least two images. They should be the same size. Here is the code to get them both on your page:

<a href="mouse.html"
    onmouseover="document.arrow.src='red.gif';"
    onmouseout="document.arrow.src='black.gif';">
<img src="black.gif" name="arrow" width=40 height=40 border=0>
</a>

You'll notice that all the mouseover info is in the <a href> tag. You are making your main picture a link with a mouseover.
  • Your image tag must have the variable name in it.
  • In your <a> tag, you'll want to insert that name in document.name.src - for instance, the name of my image is "arrow," so mine says "document.arrow.src."
  • When someone first loads your page they'll see the image source you specified. onmouseover picks the image they'll see when they put their pointer over the image and onmouseout picks the image they'll see when they take their pointer back off. I usually use the same image for onmouseout as I used originally, so it flashes back, but you certainly don't have to.
<link mouseover>


You can also use the mouseover tag to make a link change an image. For example:

<a href="mouse.html"
    onmouseover="document.list.src='red.gif';"
    onmouseout="document.list.src='q.gif';">
a red arrow</a><br>
<a href="mouse.html"
    onmouseover="document.list.src='black.gif';"
    onmouseout="document.list.src='q.gif';">
a black arrow</a><br>
<img src="../pix/q.gif" name="list" width=40 height=40 border=0>



a red arrow
a black arrow



<preloading images>


Now you want to be able to preload your mouseover image(s). Why? Because anyone on an even slightly slow modem is going to mouse over your image and nothing will happen for two or three seconds. They will probably mouse right back off without ever seeing it. Here is a JavaScript thingy to preload the images:

<script language="JavaScript">
<!--

Image1= new Image(40,40)
Image1.src = "red.gif"

Image2 = new Image(40,40)
Image2.src = "black.gif"

// -->
</script>

The comment after the <script> tag (<!--   -->) is just so that no matter where you put this code, it will be invisible when viewing the page.

All you have to do is enter in the path to your image and write the size in between the parentheses (width,height). So my image, red.gif, gets loaded before my visitor mouses over it. Now when they mouse over it, it's instantly there, because it was already loaded.

One thing you're going to want to do is put this at the bottom of your document. If you put it at the top, it will load all of your preload images before the rest of your page, and your page will just sit there all blank while it loads, which will suck.
go back