homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

is this the most efficient javascript rollover script?

10+ Year Member

Msg#: 4878 posted 8:17 am on Jan 19, 2006 (gmt 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">


JAB Creations

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

Msg#: 4878 posted 11:58 pm on Jan 19, 2006 (gmt 0)

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.



10+ Year Member

Msg#: 4878 posted 12:13 am on Jan 20, 2006 (gmt 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


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved