PDA

View Full Version : DOM Image Rollover II help



jollyschwa
05-29-2009, 03:39 PM
I did a search but didn't find an answer to this.

This script is great, but I'm trying to figure out how to keep the button in the mousedown state until another button is clicked. I'm sure it's something simple, but I'm just starting with this stuff and can't seem to figure it out.

Here's a link to the script...
http://www.dynamicdrive.com/dynamicindex15/domroll2.htm

And here's the code...
/*
Header Information------------------------------------[Do Not Remove This Header]--
Title: OO Dom Image Rollover
Description: This script makes it easy to add rollover/ mousedown
effects to any image on the page, including image submit buttons. Automatically
preloads images as well. Script works in all DOM capable browsers- IE5+, NS6+,
Opera7+.

Legal: Copyright 2005 Adam Smith
Author Email Address: ibulwark@hotmail.com
Date Created: June 6, 2005
Website: Codevendor.com | eBadgeman.com
Script featured on Dynamic Drive: http://www.dynamicdrive.com
-----------------------------------------------------------------------------------
*/

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

function store(src, down, over){
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;
}
}

var ih = 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("srcover");this.oldmouseup();}

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

function mouseup2(t){
var newmouseup;
if(t.onmouseup){
t.oldmouseup=t.onmouseup;
newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");this.oldmouseup();}
}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");}}
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("oldsrc");this.oldmouseout();}
}
else{newmouseout=function(){this.src=this.getAttribute("oldsrc");}}
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'):'';
ih.store(s,d,o);
}

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;}}
}



I'd give a link to what I'm working on, but I'm not actually creating a web page, just learning out of curiosity.

clueful
05-29-2009, 05:10 PM
I did a search but didn't find an answer to this.

This script is great, but I'm trying to figure out how to keep the button in the mousedown state until another button is clicked. I'm sure it's something simple, but I'm just starting with this stuff and can't seem to figure it out.
You've got the author's address - assuming he's still interested...

There are several weaknesses in that script, not least that it relies on non-standard attributes, so the document won't validate, and the pre-loader is flawed.

Try searching on 'sticky rollovers' or 'locking rollovers'.

jollyschwa
05-29-2009, 07:17 PM
You've got the author's address - assuming he's still interested...

There are several weaknesses in that script, not least that it relies on non-standard attributes, so the document won't validate, and the pre-loader is flawed.

Try searching on 'sticky rollovers' or 'locking rollovers'.

That did the trick! I didn't know it was called that :)

Here's a good one I found right away...

http://scripterlative.com/files/smartroll.htm

I played around with it, and understood it pretty quickly.