Simple RollOver Swap Image

Posted on by

Adobe Dreamweaver offers a way to Swap Images by adding javascript through its behaviours which uses following functions:

function MM_swapImgRestore()
function MM_findObj(n, d)
function MM_swapImage()
function MM_preloadImages()

And at OnMouseOver and OnMouseOut events you can swap images, but that method adds a lot of javascript code into your pages.

There is another very simple and easy way of swapping images. You need a single js file of 1 kb that will be sufficient for all the pages of your website. Moreover implementation of code is as easy as think and done.

This is the implementation of Easy and Simple Image Swap by Jehiah Czebotar.

Create a js file i.e. rollover.js and put following code in that:

function SimpleSwap(el,which){
  el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;
    // preload image
    // comment the next two lines to disable image pre-loading
    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;
    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");
    // save original src
    x[i].setAttribute("origsrc",x[i].src);
  }
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}

Include it in web page like this:

<script language="javascript" type="text/javascript" src="rollover.js"></script>

Finally place your image like following.

<img src="ss_img.gif" oversrc="ss_img_over.gif">

oversrc will handle the hover state of image. Now you will just place image and then point its hover state image in oversrc and you are done.

Download Simple Image Swap Example

2 thoughts on “Simple RollOver Swap Image”

Comments are closed.