Elephants

SITE WEBMISS VISITOR TUTORIALS HOME HOST DOMAIN

<a href="http://www.offwhite.co.nr/" target=_blank><img src="http://i402.photobucket.com/albums/pp108/bubblegum-drama/v3_link.jpg" border="0"></a>
More?

Basic Image Rollover

You know those images, that when you roll over them, change? Learn how to create an image rollover now! You will need your image, and the image you want it to rollover into.

So, get your main image (the one that will load onto the page) and set up the code as normal, but MAKE SURE you have a name (that's the "name" section).

<img name="button" src="yourimageurlhere" width="200" height="50" border="0">

Now you'll need your second image, and since you want it to be able to come up instantly, we'll use a pre-loading script, like this:

<script language="JavaScript"> <!-- // start hidden code our_image = new Image(); our_image.src = "mouseoverimageurl"; // done with hidden code --> </script>

This will tell the visitor's computer to make room for your second image while it loads the page, so it'll work faster.

Now we need the actual code to make the changing occur. This works like a normal link code, but since we're not going anywhere we'll leave the destination as "#".

<a href="#"></a>

Here comes the rollover part. You have to add some more to the link tag in order for it to actually change, so change what was in the last snippet of code to this:

<a href="#" onMouseOver="button.src=our_image.src;" onMouseOut="button.src='yourimageurl';">

And have that instead of the original link. REMEMBER: never give two things the same name, or else this code won't work. So here's what it should look like when you put it all together:

<script language="JavaScript"> <!-- // start hidden code our_image = new Image(); our_image.src = "mouseoverimageurl"; // done with hidden code --> </script> <a href="#" onMouseOver="button.src=our_image.src;" onMouseOut="button.src='yourimageurlhere';"> <img name="button" src="yourimageurlhere" border="0"></a>

And the finished image will look like this:

Hope this tutorial has helped you. If it has, let me know! I love to know that my tutorials are helping people.