Results 1 to 8 of 8

Thread: DOM Rollovers not always reverting onmouseout?

  1. #1
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Cool DOM Rollovers not always reverting onmouseout?

    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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  3. #3
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Hmm... I don't know what would be wrong.
    Code:
    <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.
    Last edited by Nile; 02-15-2009 at 01:56 PM.
    Jeremy | jfein.net

  5. #5
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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:

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

  6. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Then do:
    Code:
    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.
    Jeremy | jfein.net

  7. #7
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    The script does the SAME thing that the Dom Image Rollover does.
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •