Monkeyslunch.com - JS Rollovers Tutorial

Effective Rollover Images and Preloaders

The basic Rollover image (an image that changes from one image to another when your mouse moves over top, and back again when the mouse leaves) is one of the most common uses for Javascript.

In order to create this script you'll need:
1. At least two images- an original and a replacement
2. An anchor tag around the original image (it can link to another page, or simply use a # symbol as the link)
3 . Functions made at the beginning of your page in Javascript
4 . the "onload" event handler in your body tag, as well as the "onmouseover" and
"onmouseout" event handlers in your anchor tag

Basically what's happening when you roll your mouse over that original image and it changes to the next is your anchor tag is calling a Javascript function from somewhere else on the page using "onmouseover" and "onmouseout" event handlers to change the "src" element of the <img> tag. Technically you could write the Javascript directly into the anchor tag, but this sometimes causes the browser to try and open your Javascript as though it were a new HTML page- not exactly desired, I hope. If you can understand that, it's basically simple from then on.

Of course you don't want your viewers to roll over the image on your page and have to wait for too long for the new one to appear, do you? No, you want the wait to be the least amount of time possible. This is why we add a preloader function that's called with an "onload" event handler by the body tag when the page loads, which in turn loads all of the images involved in any of our rollovers so they're ready to go when we want to see them. Getting excited? Weird, if you are, but that's okay.

So, the functions found in the header of the HTML that our anchor tag will call on it's onmousover and onmouseout event handlers will look like this (and you can steal it if you want):

<head>

<title>Monkeyslunch.com - JS Rollovers Tutorial</title>

<link href="tutorialstyles.css" rel="stylesheet" type="text/css" />

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

-->
</script>

So, now we have two functions- one that changes the image rolled over to whatever we specify, and one that changes things back. We also have our preloadImages function which we'll call in the body tag to make sure all of our images load nice and spiffy like. It's important that you notice I am finding my image by it's id. It is also possible to get my image by it's name element. If I wanted to fetch my image by it's name I would refer to it with document.whateverTheNameIs instead of document.getElementById(""). This can actually be quite helpful, as not all browsers will support the getElementById command, but for the sake of myself and this tutorial we're going to use it anyways.

TIP: Notice how I alternate starting with the lowercase r and then an uppercase O in rollOver? You don't have to do this, but it's generally a "cleaner coding" way of going about things. It just makes things easier to read since Javascript can't use spaces in it's variable/function names. doYouUnderstandWhatIAmSaying? While you think you might be being clever while you're coding by making things harder to read... you're not. What you're doing is making it harder for yourself later when you have to come back to this in a year to change it. Make your function and variable names easy to read, understand and remember.

Now that we have our functions, let's lay in our anchor and image tags and all the event handlers required to get everything working! That should look like this:

And that will make an image like the one to the right for us..

Just like we already went over, onmouseover is calling the function rollOver and onmouseout is calling the function rollBack. You could have named your functions whatever you'd like. Just remember that Javascript is case sensitive, so when you call that function later it has to be exactly how you wrote it.

I'm sure you understand why it was a good idea to preload our images, but did you notice that in the preloader we assigned those images into the variables Spencer1 and Spencer2? You see, then when we wanted to change the src on our rollover we already had a Spencer2 that we could easily grab a source from. This means your src for that image was already declared and you don't have to worry about it while you're typing out your anchor tag and all the event handlers- you only have to type the original src of the new image once!

Why do we add that little "return" when we called our function?

Have you ever gone to a page with Javascript, clicked on something like a sliding menu and had it take you to the top of the page, even though you only wanted to activate the Javascript and NOT go to the top of the page as well? You see this all the time on artist's sites when they use Javascript to open pre-sized windows for their images. What's going on is that your browser is mistaking the Javascript as an actual link, and it's trying to reload the page. Notice how we added "return false" to our onclick event handler? This stops it from trying to return a new page when the user clicks. The explanation for the "return" command is something we don't need to go into right now, so just remember that for now, that's how it'll save you.

And the entire code for everything would be:

Feel free to use those scripts, and credit me for the copy and paste too! I hope that all made sense.

This concludes the Javascript Rollovers tutorial.

-Spence