Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

is this the most efficient javascript rollover script?

8:17 am on Jan 19, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 29, 2002
votes: 0

I found this guy's script, after searching for a more simple javascript rollover script. It comes from a guy on the internet named Jehiah Czebotar. Just want to see what you guys think. It also preloads the images without extra effort.

In the head:

<script type="text/javascript">
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();
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}

In the body:

<img src="image1.gif" oversrc="image2.gif">
11:58 pm on Jan 19, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
votes: 12

If you want to do an image rollover the smallest method would be to use a 1x1 pixel transparent gif.


<img alt="alttext" class="rollover" src="transparent.gif" />


img.rollover {
background: url('image.gif');
img.rollover:hover {
background: url('image-hover.gif');

Because IE does not support :hover (IE7 will) you'll want to do this....


<img alt="alttext" class="rollover" onmouseover="this.className='rolloverh'" onmouseout="this.className='rollover'" src="transparent.gif" />


img.rollover {
background: url('image.gif');
img.rollover:hover, img.rolloverh {
background: url('image-hover.gif');

Let me know how it works.


12:13 am on Jan 20, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 22, 2002
votes: 0

I use this one

Head or linked file -

/* Standards Compliant Rollover Script Author : Daniel Nolan wwwdotbleedingegodotcodotuk/webdevdotphp */ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } window.onload = initRollovers;

On the page use the class imgover -

<img src="whatever.gif" class="imgover">

and the javascript substitutes whatever_o.gif

I like it



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members