Javascript Image Rollovers & Method Behind It

Image rollovers is quite a common request by many designers, as they want to usually use them as buttons. I always wanted to know how to do it, and it annoyed me when it took ages to find a suitable tutorial. However, with learning the basics of javascript, it’s really simple and memorable (I infact came up with this code on my own).

Firstly we have to understand the main functions needed in this tutorial:

Onmouseover = This changes when you hover over an object.

Onmouseout = This changes when you hover out of the object.

Onclick = This is something that changes when you click it (whether it be a link, form field, image etc.)

For the rollover, we’ll be needing the onmouseover and onmouseout.

The other function we need is x.src=’…’ X can be anything you name the object with (so if you had an image and ‘called’ it ‘rollover’ (<img name=”rollover”…) we’d use rollover.src=’…’ . This function changes the src of anything that has an src e.g. an image. If, however, the change is in the image itself we do not need to put the name of the src in front as it can refer to nothing but the image. For example, you’d use the name + src if you wanted the image to change if you hovered over something other the changing image. For this, we’ll just need to use, src=’…’

Can you guess the rollover code yet?

We’ll use these two images:

and

If we wanted the first image to be the default image and the second image the rollover we’d do the following.

The url of the first image is http://dragonrust.org/tutorials/javascript/onmouseout.gifand the second’s url is http://dragonrust.org/tutorials/javascript/onmouseover.gif.

The code there would be:

<img src=”/tutorials/javascript/onmouseout.gif ” onmouseover=”src=’/tutorials/javascript/onmouseover.gif‘” onmouseout=”src=’/tutorials/javascript/onmouseout.gif ‘”>

Let’s go through the code. The original src is just like programming a normal image so we put the first(default) image’s url in. Then we add the first function: onmouseover. We put the second image in between the speech marks. Then we do the identical method for onmouseout but we change it back to the original url.

The above code will output the following:

If you’re adventurous and confident with this method, you can experiment by adding the onclick function.

We’ll choose a third image (url of http://dragonrust.org/tutorials/javascript/onclick.gif):

So we’ll use the identical code we formulated above, but we’ll add the onclick using the same method to input urls into functions:

<img src=”/tutorials/javascript/onmouseout.gif ” onmouseover=”src=’/tutorials/javascript/onmouseover.gif‘” onmouseout=”src=’/tutorials/javascript/onmouseout.gif ‘” onclick=”src=’/tutorials/javascript/onclick.gif‘”>

This code will output:

That’s it! I hope you enjoyed and learnt from this tutorial ;). Anymore javascript or programming tutorial requests, or any problems with this tutorial, feel free to email me.

If you want to make these into buttons, simply add <a> </a> tags around the code and be sure to add the attribute border=”0″ to the <img> tag if you don’t want a default blue border around it.