« »

This JavaScript simplifies the creation of image rollovers. Instead of a lot of complicated code on the page, it only requires a JavaScript link to the two images, without any changes to the external JavaScript file. Very unobtrusive JavaScript!

Label: Simple Swap

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">
// Created by: Jehiah Czebotar :: http://jehiah.com/

/* To read the explanation of how this works,
  visit: http://jehiah.com/archive/simple-swap */

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();}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<img src="gif_logojsb2.gif" oversrc="gif_logojsb.gif">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->