Solved Javascript image problem

Stefany93 · Aug 5, 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 :cry:

. 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 · Aug 6, 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.image[COLOR=Red][B]s[/B][/COLOR]){
            
            var [COLOR=Red][B]FRST[/B][/COLOR] = new Image();
           [COLOR=Red] [B]FRST[/B][/COLOR].src = "http://farm6.static.flickr.com/5135/5515445106_d27e289646_m.jpg";
            var [COLOR=Red][B]SCND[/B][/COLOR] = new Image();
            [B][COLOR=Red]SCND[/COLOR][/B].src ="dimitar_shumen.jpg";
            }
            
            function mouse_over(){
                        
          [B]  [COLOR=Red]if (document.images) document.pic1.src=SCND.src;[/COLOR][/B]
            
            }
            function mouse_out(){
            
         [COLOR=Red]   [B]if (document.images) document.pic1.src=FRST.src;[/B][/COLOR]
            
            
            }
</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" [B][COLOR=Red]name[/COLOR]="pic1"[/B]  onmouseover="mouse_over()[COLOR=Red][B];return true;[/B][/COLOR]"
 onmouseout="mouse_out()[COLOR=Red][B];return true;[/B][/COLOR]"/></a>
</BODY></HTML>

Stefany93 · Aug 6, 2011

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

Solved Javascript image problem

Stefany93

New member

My Computer

Neutron16

New member

My Computer

Stefany93

New member

My Computer