Image Effects : Simple Swap

Jehiah Czebotar Feb 15, 2006

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

The JavaScript Source: Image Effects : Simple Swap

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
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();}

<img src="horse.gif" oversrc="horse_over.gif">
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Image Effects : Simple Swap

Leave a Response

Attention JavaScript Coders

Go Deeper