Windows 7 Forums
Welcome to Windows 7 Forums. Our forum is dedicated to helping you find support and solutions for any problems regarding your Windows 7 PC be it Dell, HP, Acer, Asus or a custom build. We also provide an extensive Windows 7 tutorial section that covers a wide range of tips and tricks.


Windows 7: Javascript image problem


05 Aug 2011   #1

Windows 7 Ultimate
 
 
Javascript image problem

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

My System SpecsSystem Spec
.

06 Aug 2011   #2

Windows 8.1 ; Windows 7 x86 (Dec2008-Jan2013)
 
 

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>
My System SpecsSystem Spec
06 Aug 2011   #3

Windows 7 Ultimate
 
 

Neutron16 thank you so much! you are great! Thank you!
My System SpecsSystem Spec
.


Reply

 Javascript image problem




Thread Tools



Similar help and support threads for2: Javascript image problem
Thread Forum
IE9 - Problem with javascript Browsers & Mail
javascript problem crops up Browsers & Mail
Help with Javascript? Chillout Room
JavaScript help... Chillout Room
javascript Chillout Room
JavaScript Chillout Room
Javascript error? BSOD Help and Support

Our Sites

Site Links

About Us

Find Us

Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

Designer Media Ltd

All times are GMT -5. The time now is 12:41 PM.
Twitter Facebook Google+



Windows 7 Forums

Seven Forums Android App Seven Forums IOS App
  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33