PDA

View Full Version : DOM Image Rollover III?



aka Robbie
02-14-2007, 04:49 PM
I just thought I'd show my slightly modified version of the DOM Image Rollover II script (based on http://www.dynamicdrive.com/dynamicindex15/domroll2.htm).

Whereas the original had three states (src, over and down) I made changes to make it five state (src, over, down, up and out)

In effect this shows an image for: the original, when the cursor is over, when the mouse is pressed, when the mouse is released and when the cursor is not over).

This gives much more control, especially if you are using animated gifs. You can see an example of it in action here http://www.metadigm.co.uk/partners/websense/index_test.html

The code:

function imageholderclass(){
this.over=new Array();
this.down=new Array();
this.up=new Array();
this.src=new Array();
this.out=new Array();
this.store=store;

function store(src, down, over, up, out){
var AL=this.src.length;
this.src[AL]=new Image(); this.src[AL].src=src;
this.over[AL]=new Image(); this.over[AL].src=over;
this.down[AL]=new Image(); this.down[AL].src=down;
this.up[AL]=new Image(); this.up[AL].src=up;
this.out[AL]=new Image(); this.out[AL].src=out;
}
}

var iih = new imageholderclass();
var mouseisdown=0;

function preloader(t){
for(i=0;i<t.length;i++){
if(t[i].getAttribute('srcover')||t[i].getAttribute('srcdown')){

storeimages(t[i]);
var checker='';
checker=(t[i].getAttribute('srcover'))?checker+'A':checker+'';
checker=(t[i].getAttribute('srcdown'))?checker+'B':checker+'';

switch(checker){
case 'A' : mouseover(t[i]);mouseout(t[i]); break;
case 'B' : mousedown(t[i]); mouseup2(t[i]); break;
case 'AB' : mouseover(t[i]);mouseout(t[i]); mousedown(t[i]); mouseup(t[i]); break;
default : return;
}

if(t[i].src){t[i].setAttribute("oldsrc",t[i].src);}
}
}
}
function mouseup(t){
var newmouseup;
if(t.onmouseup){
t.oldmouseup=t.onmouseup;
newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcup");this.oldmouseup();}

}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcup");}}
t.onmouseup=newmouseup;
}

function mouseup2(t){
var newmouseup;
if(t.onmouseup){
t.oldmouseup=t.onmouseup;
newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcup");this.oldmouseup();}
}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcup");}}
t.onmouseup = newmouseup;
}

function mousedown(t){
var newmousedown;
if(t.onmousedown){
t.oldmousedown=t.onmousedown;
newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");this.oldmousedown();}}
}
else{newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");}}}
t.onmousedown=newmousedown;
}

function mouseover(t){
var newmouseover;
if(t.onmouseover){
t.oldmouseover=t.onmouseover;
newmouseover=function(){this.src=this.getAttribute("srcover");this.oldmouseover();}
}
else{newmouseover=function(){this.src=this.getAttribute("srcover");}}
t.onmouseover=newmouseover;
}

function mouseout(t){
var newmouseout;
if(t.onmouseout){
t.oldmouseout=t.onmouseout;
newmouseout=function(){this.src=this.getAttribute("srcout");this.oldmouseout();}
}
else{newmouseout=function(){this.src=this.getAttribute("srcout");}}
t.onmouseout=newmouseout;
}

function storeimages(t){
var s=(t.getAttribute('src'))?t.getAttribute('src'):'';
var d=(t.getAttribute('srcdown'))?t.getAttribute('srcdown'):'';
var o=(t.getAttribute('srcover'))?t.getAttribute('srcover'):'';
var u=(t.getAttribute('srcup'))?t.getAttribute('srcup'):'';
var e=(t.getAttribute('srcout'))?t.getAttribute('srcout'):'';
iih.store(s,d,o,u,e);
}

function preloadimgsrc(){
if(!document.getElementById) return;
var it=document.getElementsByTagName('IMG');
var it2=document.getElementsByTagName('INPUT');
preloader(it);
preloader(it2);
}

if(window.addEventListener){window.addEventListener("load", preloadimgsrc, false);}
else{
if(window.attachEvent){window.attachEvent("onload", preloadimgsrc);}
else{if(document.getElementById){window.onload=preloadimgsrc;}}
}

Ok to some of you JS gurus it may be obvious, but being a JS novice I am very happy. And hopefully this will help others who may not know much JS.