DOM Rollovers not always reverting onmouseout?

[moscarda]

1) Script Title:
DOM Image Rollover v3.0

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex15/domroll.htm

3) Describe problem:
I know i've installed the script correctly, because it works like it's supposed to... with one slight bug. Unless the mouse passes very slowly and carefully out of the target area, the image never reverts back to its normal state, like it should "onmouseout." Could anyone help me add something to the code to make it more stable? Thank you.

[Nile]

What browser are you using? Works fine for me in FF 3.5, Google Chrome 1.0.154.48, Opera 9.63, and Internet Explorer 7.

[moscarda]

im using the latest version of firefox. i didn't think it was a browser issue. do you think it could just be glitchy by other scripts/movies on the page slowing it down?

[Nile]

Hmm... I don't know what would be wrong.

<script type="text/javascript">
Element.prototype.imageHover = function(on, out){
  this.style.backgroundImage="url('"+out+"')";
  this.onmouseover = function(){
    this.style.backgroundImage="url('"+on+"')";
  };
  this.onmouseout = function(){
    this.style.backgroundImage="url('"+out+"')";
  };
};
window.onload = function(){
  document.getElementById('div').imageHover('http://puppywar.com/images/cards/31309.jpg', 'http://puppywar.com/images/cards/29958.jpg');
};
</script>
<div id="div" style="height: 250px; width: 250px;font-size: 32px; font-weight: bold;"></div>

Give that a try.

[moscarda]

that script you posted works fine, if i was starting over and using another way of implementing it. problem is, i'm working with this script:

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

and rather than using div id tags to invoke the rollover, i'm using images, with the added tag "srcover".

is there a way i could include the changes you made to the script you posted, to the script im using?

[Nile]

Then do:

Image.prototype.imageHover = function(on, out){
  this.onmouseover = function(){
    this.src=on;
  };
  this.onmouseout = function(){
    this.src=out;
  };
};
var image = new Image(); //blah
window.onload = function(){
image.imageHover('http://puppywar.com/images/cards/31309.jpg', 'http://puppywar.com/images/cards/29958.jpg');
};

I haven't tested the above.

[moscarda]

im not sure i understand...

i'm asking help with the original script on dd that i linked to and included above in the last post. a script i can implement throughout my site with unlimited rollovers. i am not sure why you are offering a small new code to change one picture of a puppy into another...

[Nile]

The script does the SAME thing that the Dom Image Rollover does.