Image Rollovers Without Inline HTML Markup

Using non-obtrusive, standards compliant cross-browser code for making image rollovers with ease.

fixed a typo, thanks to Slade for the heads-up - 08.09.2005

created on 08.09.2005


Hey there.. I don't know if you are following the trend in Javascripting, but inline javascripts are becoming a thing of the past, hopefully, for a number of good reasons:

Example Rollovers

Hover these (most basic usage):

hover test hover test hover test hover test

Hover and click these:

click test click test click test click test

Hover and click these, there is no restore:

No restore No restore No restore No restore

Example Basic Usage

Required HTML

Standard HTML
<img src='sampleroll_nm.png' />

Required Javascript


Required hover image name for this hover:


That's it!

This was the most basic usage, it is hover with restore. You just name your images so that they have "_nm" in the end of their name, and our script knows that they are our target images, and replaces the "_nm" with "_hv" on hover, and restores the image on mouse out. The good thing is, none of our code destroys validity of our HTML, so the resulting code is valid HTML/XHTML.

Of course we are assuming you have included the prepareImageSwap function in your page either by linking or embedded in the head element of your page, and ensuring you call it after document has loaded (window.onload, you know the drill, but you can check the function used for this page here.)

Advanced Usage

Variables that can be passed to the function

prepareImageSwap(elem, mouseOver, mouseOutRestore, mouseDown, mouseUpRestore, mouseOut, mouseUp)

Element passed as object or its ID as string
Element || Element's ID (string)
Do image swap on mouse hover?
true || false (default: true)
Restore image on mouse-out?
true || false (default: true)
Do image swap on mouse-down?
true || false (default: false)
Restore image on mouse-button-up?
true || false (default: false)
Use separate image for mouse-out?
true || false (default: false)
Use separate image for mouse-up?
true || false (default: false)

Naming convention for images

Assuming base image name will be "foo" and our image is a jpg.

Our base image name
Image name for hover
Image name for mouse-down
Image name for mouse-out (when you want a separate image for mouse-out instead of restoring to original)
Image name for mouse-up (when you want a separate image for mouse-up instead of restoring to original)

The code

function prepareImageSwap(elem,mouseOver,mouseOutRestore,mouseDown,mouseUpRestore,mouseOut,mouseUp) { 
//Do not delete these comments. 
//Non-Obtrusive Image Swap Script V1.1 by 
//Attribution required on all accounts 
    if (typeof(elem) == 'string') elem = document.getElementById(elem); 
    if (elem == null) return; 
    var regg = /(.*)(_nm\.)([^\.]{3,4})$/ 
    var prel = new Array(), img, imgList, imgsrc, mtchd; 
    imgList = elem.getElementsByTagName('img'); 
    for (var i=0; img = imgList[i]; i++) { 
        if (!img.rolloverSet && img.src.match(regg)) { 
            mtchd = img.src.match(regg); 
            img.hoverSRC = mtchd[1]+'_hv.'+ mtchd[3]; 
            img.outSRC = img.src; 
            if (typeof(mouseOver) != 'undefined') { 
                img.hoverSRC = (mouseOver) ? mtchd[1]+'_hv.'+ mtchd[3] : false; 
                img.outSRC = (mouseOut) ? mtchd[1]+'_ou.'+ mtchd[3] : (mouseOver && mouseOutRestore) ? img.src : false; 
                img.mdownSRC = (mouseDown) ? mtchd[1]+'_md.' + mtchd[3] : false; 
                img.mupSRC = (mouseUp) ? mtchd[1]+'_mu.' + mtchd[3] : (mouseOver && mouseDown && mouseUpRestore) ? img.hoverSRC : (mouseDown && mouseUpRestore) ? img.src : false; 
            if (img.hoverSRC) {preLoadImg(img.hoverSRC); img.onmouseover = imgHoverSwap;} 
            if (img.outSRC) {preLoadImg(img.outSRC); img.onmouseout = imgOutSwap;} 
            if (img.mdownSRC) {preLoadImg(img.mdownSRC); img.onmousedown = imgMouseDownSwap;} 
            if (img.mupSRC) {preLoadImg(img.mupSRC); img.onmouseup = imgMouseUpSwap;} 
            img.rolloverSet = true; 
    function preLoadImg(imgSrc) { 
        prel[prel.length] = new Image(); prel[prel.length-1].src = imgSrc; 
function imgHoverSwap() {this.src = this.hoverSRC;} 
function imgOutSwap() {this.src = this.outSRC;} 
function imgMouseDownSwap() {this.src = this.mdownSRC;} 
function imgMouseUpSwap() {this.src = this.mupSRC;}

The code, explained

Please check back later for this, just subscribe to my feed for updates to