There are many ways to do this, but in this example we’re just going to do a simple image replacement on mouseover. We’ll start off with the code for the image:

<img src="/images/how-to/javascript/button-inactive.gif" id="button" />

For your SEO enthusiasts and W3C fiends, I know there are missing attributes. We’re going to go as minimalist as possible to simplify this process. One attribute to note of is the “id” which we’ll be using to select this particular image. This is very important so that we can select this image element based on it’s id (DOM FTW!).

Next we want to apply an event handler to that object so that when the user moves the cursor over it, the image will change into something pretty! Internet explorer uses a different type of event handler code than other browsers (because if it didn’t, this would be way too easy). So we will ensure we do a little browser detection:

var isMoz;
window.addEventListener ? isMoz = true : isMoz = false;

The window.addEventListener method is not used by Internet Explorer, so here we just single those browsers out. Next we want to create the code to attach a function to the mouseover (or onmouseover) event of the button. We haven’t created the image swapping functions yet, but keep in mind that we’ll call them imgOver and imgOut. That being said, lets create the event listeners and put them in a function called initMouseOver:

function initMouseOver() {
 var objImage = document.getElementById('button');
 if (isMozilla) {
  objImage.addEventListener('mouseover', imgOver, false);
  objImage.addEventListener('mouseout', imgOut, false);
 }
 else {
  objImage.attachEvent('onmouseover', imgOver);
  objImage.attachEvent('onmouseout', imgOut);
 }
}

Now you see why the image’s ID is important (remember: DOM FTW!). In the above snippet, when the function is called, event listeners are added to the image object. In addEventListener and attachEvent, the first value passed in is called the event type. For a mouse over event, these are valued at mouseover and onmouseover. The second value is the function to be associated with the event. In addEventListener the last value taken in is a boolean value which indicates whether or not to bind the event as it propogates to the image or as the event bubbles upwards from the image. This is usually set to false.

Next we need to create the functions to swap the images in and out as the object captures the events:

function imgOver(e) {
 var eMoz = 'target';
 var eIE = 'srcElement';
 var objImgOver = new Image();
 objImgOver.src = '/images/how-to/javascript/button-active.gif';
 e[eMoz] ? e[eMoz].src = objImgOver.src : e[eIE].src = objImgOver.src;
}
function imgOut(e) {
 var eMoz = 'target';
 var eIE = 'srcElement';
 var objImgOut = new Image();
 objImgOut.src = '/images/how-to/javascript/button-inactive.gif';
 e[eMoz] ? e[eMoz].src = objImgOut.src : e[eIE].src = objImgOut.src;
}

In both functions, we’re initializing the new image, then swapping it. This is not the most efficient way to do this since we’re recreating a new image object every time an event occurs. So let’s clean up all the code and put it into a separate javascript file. Here’s how it should look:

var isMoz;
window.addEventListener ? isMoz = true : isMoz = false;
var eMoz = 'target';
var eIE = 'srcElement';
var objImgOver = new Image();
objImgOver.src = '/images/how-to/javascript/button-active.gif';
var objImgOut = new Image();
objImgOut.src = '/images/how-to/javascript/button-inactive.gif';

function initMouseOver() {
 var objImage = document.getElementById('button');
 if (isMozilla) {
  objImage.addEventListener('mouseover', imgOver, false);
  objImage.addEventListener('mouseout', imgOut, false);
 }
 else {
  objImage.attachEvent('onmouseover', imgOver);
  objImage.attachEvent('onmouseout', imgOut);
 }
}
function imgOver(e) {
 e[eMoz] ? e[eMoz].src = objImgOver.src : e[eIE].src = objImgOver.src;
}
function imgOut(e) {
 e[eMoz] ? e[eMoz].src = objImgOut.src : e[eIE].src = objImgOut.src;
}

*Deep breath* still with me? That’s essentially it! All you need to do now is to include the javascript file in your HTML and ensure the initMouseOver() function is called when the page loads. Simply add onload=”" to your body tag and it should look a little something like this:

<body onload="javascript:initMouseOver();">

That’s it! No wait–that’s only for one image. What if we need to set this up for multiple images? Well, glad I asked because there are several ways of accomplishing this. If you think you can take more of this, carry on to one of the next tutorials or download all the work files for this one:

Example: Unobtrusive Image Rollover

Next step: multiple buttons, preloading, and optimization