Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript stopped working in Chrome/Safari, still works in IE

    I am using javascript to change the buttons on my website so that they load up a different image when hot spots on the buttons are hovered over.

    Everything has been working great, but this morning I tried checking out my site and for some reason the javascript wasn't working in Chrome, or on my iphone using Safari.
    I tried it in IE and everything still works.

    Any ideas on why it would stop working for those two browsers?

    Here is the javascript:

    Code:
     
    function init(){
    	
    	document.getElementsByTagName('area')[0].onmouseover=function(){
    		document.getElementById('crocodileImg').src='Images/crocodileHover.png';	
    			this.onmouseout=function() {	
    		document.getElementById('crocodileImg').src='Images/crocodile.png';
    		}
    	}
    	
    	document.getElementsByTagName('area')[1].onmouseover=function(){		
    		document.getElementById('historyImg').src='Images/historyHover.jpg';
    			this.onmouseout=function() {
    		document.getElementById('historyImg').src='Images/history.jpg';
    		}
    	}
    	
    	document.getElementsByTagName('area')[2].onmouseover=function(){
    		document.getElementById('applyImg').src='Images/applyHover.jpg';
    			this.onmouseout=function() {
    		document.getElementById('applyImg').src='Images/apply.jpg';
    		}
    	}
    	
    	document.getElementsByTagName('area')[3].onmouseover=function(){		
    		document.getElementById('applyImg').src='Images/membersHover.jpg';
    			this.onmouseout=function() {
    		document.getElementById('applyImg').src='Images/apply.jpg';
    		}
    	}
    
    	document.getElementsByTagName('area')[4].onmouseover=function(){
    		document.getElementById('mediaImg').src='Images/mediaHover.jpg';
    			this.onmouseout=function() {
    		document.getElementById('mediaImg').src='Images/media.jpg';
    		}
    	}	
    }
    
    if(window.addEventListener){
    	window.addEventListener('load',init,false);
    }
    
    else { 
    	if(window.attachEvent){
    	window.attachEvent('onload',init);
    	}
    }
    I'm not sure if seeing the html the js is referencing will help at all, but here it is just in case:

    Code:
            <div id="crocodile">
                <img id="crocodileImg" src="Images/crocodile.png" usemap="#crocodileImg" border="0" width="436" height="147" alt="Home" />
                <map id="crocodileImg" name="crocodileImg">
                <area id="crocArea" shape="poly" coords="41,9,23,21,20,58,40,78,72,78,82,86,88,112,117,129,140,126,257,126,274,107,274,79,401,78,420,66,419,26,404,6,369,7,366,0,294,0,291,7," href="index.html" alt="Home" title="Home" /> 	 
                </map>   
            </div>
            
            <div id="history">
                <img id="historyImg" src="Images/history.jpg" usemap="#historyImg" border="0" width="350" height="256" alt="Home" />
                <map id="historyImg" name="historyImg">
                <area id="historyArea" shape="poly" coords="18,77,18,167,48,170,79,208,124,233,174,238,228,218,257,188,266,176,280,184,306,182,338,102,331,93,271,92,254,54,226,27,196,11,169,4,137,7,109,17,82,33,65,51,52,74," href="history2.html" alt="History" title="History" />
                </map>             
            </div>
            
           
            <div id="apply">
                <img id="applyImg" src="Images/apply.jpg" usemap="#applyImg" border="0" width="280" height="223" alt="Apply" />
                <map id="applyImg" name="applyImg">
                <area id="applyArea" shape="poly" coords="17,43,17,57,15,72,20,84,39,83,43,79,56,76,62,62,65,49,77,42,76,36,70,22,65,14,52,14,45,21,38,24,31,32," href="apply.html" alt="Apply" title="Apply" />
                <area id="membersImg" shape="poly" coords="112,49,97,55,77,71,64,89,61,99,47,104,44,123,44,149,46,164,57,168,70,172,82,186,102,197,125,206,146,208,168,201,188,189,201,177,208,166,231,165,254,165,260,150,262,133,262,113,254,97,238,95,221,97,213,97,205,85,197,74,183,63,172,55,159,51,145,48,134,47,"href="members.html" alt="Members" title="Members" />
                </map>           
            </div>
            
            <div id="media">
                 <img id="mediaImg" src="Images/media.jpg" usemap="#mediaImg" border="0" width="182" height="149" alt="Media" />
                <map id="mediaImg" name="mediaImg">
                <area id="mediaArea" shape="poly" coords="0,102,16,103,26,117,44,129,67,133,92,128,108,115,118,102,165,102,170,88,173,65,172,52,161,49,141,49,132,42,121,42,110,30,96,22,76,16,60,14,44,18,30,29,19,36,13,48,0,51," href="media.html" alt="Media" title="Media" />
                </map>       
            </div>
    Thank you for any replies.

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved

    I found the problem. It was a CSS issue, not even javascript
    I had a rule for html putting height at 100%. Apparently IE didn't mind, but it broke my script in Chrome/Safari. Anyways, I took that rule out and everything works now.
    Thank you to those who took the time to look at my thread.
    Last edited by oremut; 12-16-2010 at 07:20 AM.


  •  

    Posting Permissions

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