JavaScript Rollovers

Introduction

Image manipulation techniques such as rollovers work with Netscape 3+, Internet Explorer 4+ and Opera 3.1+. If you are using another browser (such as Internet Explorer 3), you may not be able to see the effects - but your browser will ignore them and will safely display the page.

Here's an example of the basic rollover. Try rolling your mouse cursor over the image. Notice the following:

1. When you move the cursor over the image, it becomes a hand as if the image was a link.
2. Notice what's in the status bar when the mouse is over the image.
3. Notice that nothing happens when you click on the image.

This tutorial will show you how you can use JavaScript to achieve this effect.

I am assuming that you have a basic understanding of HTML, and are familiar with the <img> and <a href> tags and their attributes. I am NOT assuming that you know javascript, and I do my best to show you how to use these javascript facilities even if you've never coded javascript before. If you don't already know javascript, you aren't going to learn it from this tutorial. You'll just learn enough to be able to do the types of things that I demonstrate.

In the spirit of progress, I've showing code that is compatible with XHTML as well as HTML. That's why a <br> tag is shown as <br />, and why other empty tags such as <img> also have the ending /> instead of just >.