Javascript image problem

Stefany93 · 05 Aug 2011

Hello colleagues,

I was trying to make an onMouseOver effect with one image with Javascript. It works perfectly fine, the only issue was, that when I mouse over the image, it generates the other one very slowly. So I decided to preload the images before using them and that way it is will be much faster. The only problem is that it doesn't work and I have no idea why

. I mean the onmouse effect works, but the speed of loading the image is the same even without the preloading code. Can you please help me? Here is the JS code:

Code:

                      if(document.image){
			
			var pic1 = new Image();
			pic1.src = "http://farm6.static.flickr.com/5135/5515445106_d27e289646_m.jpg";
			var pic2 = new Image();
			pic2.src ="dimitar_shumen.jpg";
			}
			
			
			
			
			
			function mouse_over(){
			
		
			
			document.getElementById("pic1").src = "dimitar_shumen.jpg";
			
			}
			function mouse_out(){
			
			document.getElementById("pic1").src ="http://farm6.static.flickr.com/5135/5515445106_d27e289646_m.jpg";
			
			
			}

And the HTML code of the image I want to format:

Code:

<a href="http://www.flickr.com/photos/59988828@N03/5515445106/" title="dimitar_shumen by ChessAdmin, on Flickr"><img src="http://farm6.static.flickr.com/5135/5515445106_d27e289646_m.jpg"  alt="dimitar_shumen" id="pic1"  onmouseover="mouse_over()" onmouseout="mouse_out()"/></a>

If you need, I will also provide the code of the entire page, if necessary.

Thank you in advance!

Best Regards
Stefany

Neutron16 · 06 Aug 2011

Script has to be inside <HEAD> tag.

You do preload images , but in function mouse_over() you load them again! And unless your browser is in Offline mode it will reload that picture.
Check this out. I have highlighted differences from your code

Code:

<HTML><HEAD>
<script language="JavaScript">
 if(document.images){
            
            var FRST = new Image();
            FRST.src = "http://farm6.static.flickr.com/5135/5515445106_d27e289646_m.jpg";
            var SCND = new Image();
            SCND.src ="dimitar_shumen.jpg";
            }
            
            function mouse_over(){
                        
            if (document.images) document.pic1.src=SCND.src;
            
            }
            function mouse_out(){
            
            if (document.images) document.pic1.src=FRST.src;
            
            
            }
</script>
</HEAD>
<BODY><a href="http://www.flickr.com/photos/59988828@N03/5515445106/" title="dimitar_shumen by ChessAdmin, on Flickr">
<img src="http://farm6.static.flickr.com/5135/5515445106_d27e289646_m.jpg"
 alt="dimitar_shumen" name="pic1"  onmouseover="mouse_over();return true;"
 onmouseout="mouse_out();return true;"/></a>
</BODY></HTML>

Stefany93 · 06 Aug 2011

Neutron16 thank you so much! you are great! Thank you!