Super Simple Image Rollovers

I wanted to share with everyone a nice JavaScript file I found to create very simple image rollovers. It was created over at Jehiah.cz, I found it very useful.

Step 1

First just create a Javascript file called imgswap.js, and paste in this code:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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();}

 

Step 2

Just include this javascript file to your header, like this:

?View Code JAVASCRIPT
1
2
3
<head>
<script language="javascript" src="imgswap.js"></script>
</head>

 

Step 3

The next part is very easy, just use oversrc on your img, like this:

1
<img src="image.jpg" oversrc="image_on.jpg" />

Thats it! I find this to be extremely easy and efficiant, and I hope you do too.

 
 
Leave A Reply Here

  Username [*]

  Email Address [*]

  Website

Subscribes to this post comments updates

Please Note: All comments maybe under going moderation so there is no need to resubmit the comments. it will appeared when admin approved it, feel free to subscribes to the post comments rss to stay update