homepage Welcome to WebmasterWorld Guest from 54.166.173.147
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
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?
MWpro




msg:1482251
 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();
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>

In the body:

<img src="image1.gif" oversrc="image2.gif">

 

JAB Creations




msg:1482252
 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.

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

CSS
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....

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

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

Let me know how it works.

John

zooloo




msg:1482253
 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

zoo

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