Simple RollOver Swap Image

Hiroshi — Tue, 28 Oct 2008 09:11:47 +0000

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:

Finally place your image like following.

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

Simple RollOver Swap Image is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Web Style Press, Best Practices from all the Web, Build Better Websites » swap

Simple RollOver Swap Image

Related Posts