Simple RollOver Swap Image

by Hiroshi on October 28th, 2008

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

Javascript, swap, Tricks

Author

Hiroshi (published 95 Posts on Web Style Press, Best Practices from all the Web, Build Better Websites)

2 Reviews

Joe says:

December 6, 2008 at 12:15 pm

Maybe you will find jQuery useful:

http://code.google.com/p/jquery-swapimage/
Reply

Reply
Hiroshi says:

December 6, 2008 at 1:30 pm

@Joe: Very impressive. Thanks Joe. jQuery Swap Images with many more options. Live example is here:
http://labs.xddnet.com/jquery-.....ample.html
on Mouse over, click, double click, single click no restore, disjoint rollovers with this jQuery swap image solution is a real fun. I like it.
Reply

Reply