• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 528
  • Last Modified:

Javascript not working in IE7 - works fine in everything else...

I've got a little map application.  You mouse over a map and, depending on which continent you mouse over, a list of cities appears in a column below the map.  All is well in IE6, Chrome, Safari, etc but it's dead as a door nail in IE7.  The script isn't too complicated so I'm at a loss as to why it's hosed.

Code is below and I've attached the graphics for good measure.  I'd sure appreciate to know what I did wrong.

Thanks in advance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
	<title>Untitled</title>
	<style type="text/css" media="all">
	
	a {color:#00338e;outline:none;}
	a:link {color:#00338e;}
	a:visited {color:#00338e;}
	a:hover {color:#47a;text-decoration:underline;}
	a:active {color:#00338e;}
	ul {margin:5px 0 10px 1px;list-style-type:none;font:8pt/12pt verdana,arial,sans-serif;padding:0;}
	
	#searchPageHead {font:10pt/13pt verdana,arial,sans-serif;font-weight:bold;color#444;}
	#oppContent{width:565px;padding:0 21px 20px 21px;}
	.continent {font:9pt/12pt verdana,arial,sans-serif;font-weight:bold;padding-right:20px;}
	.divider {padding:0;margin:10px 0;color:#999;height:1px;}
	.noRight {padding-right:0;margin-right:0;}
	.continentAus {padding-right:10px;}
	.otherOpps {font:9pt/12pt arial,sans-serif;margin:5px 0px 0 10px;}
 
	/*- Continent Areas -*/
		#list li {background:url("http://www.43rdworld.com/images/bullet.gif") no-repeat top left;padding-left:10px;}
		#europe {margin-left:127px;}
		#africa {margin-left:203px;}
		#asia {margin-left:260px;}
		#australia {margin-left:320px;}
	</style>
	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  <!--
		var divArray = new Array();
			divArray.push("northAmerica");
			divArray.push("europe");
			divArray.push("asia");
			divArray.push("australia");
			divArray.push("africa");
		
		
		function underlineIt(id1) {
			if (document.getElementById(id1).style.color!='#111') {
			document.getElementById(id1).style.textDecoration='underline';
			}
		}
			
		function clearIt(id1) {
			document.getElementById(id1).style.textDecoration='none';		
		}
			
		function selectIt(id) {
			document.getElementById(id).style.color='#111';
			document.getElementById(id).style.cursor='default';
			document.getElementById(id).style.textDecoration='none';	
		}
		
		function turnOffAllDivs()
		{
			for (var i = 0; i < divArray.length; i++)
			{
				document.getElementById(divArray[i]).style.display = 'none';
				document.getElementById(divArray[i]+"1").style.color='#00338e';
				document.getElementById(divArray[i]+"1").style.cursor='pointer';
			}
		}
		 
		 
		function showEl(id)
		{
			turnOffAllDivs();
			selectIt(id+"1");
			document.getElementById(id).style.display = '';
		}
 
  //-->
  </SCRIPT>
</head>
 
<body onLoad="turnOffAllDivs();">
 
 
<div id="oppContent">
<table cellpadding="0" cellspacing="0" width="522"">
<tr><td colspan="3" id="searchPageHead">Where would you like to work?</td></tr>
<tr>
	<td width="522" valign="top" style="padding:12px 0 0 5px;"><IMG SRC="http://www.43rdworld.com/images/mainMap.gif" USEMAP="#mainMap.gif" WIDTH="338" HEIGHT="156" border="0"></td>
</tr>
<tr><td><hr class="divider" width="100%" size="1"></td></tr>
<tr>
	<td>
		<table cellpadding="0" cellspacing="0" width="390"">
			<tr>
				<td class="continent" width="32%"><div id="northAmerica1" onMouseover="underlineIt('northAmerica1');" onMouseout="clearIt('northAmerica1');" onClick="showEl('northAmerica');">North America</div></td>
				<td class="continent" width="18%"><div id="europe1" onMouseover="underlineIt('europe1');" onMouseout="clearIt('europe1');" onClick="showEl('europe');return false;">Europe</div></td>
				<td class="continent" width="15%"><div id="africa1" onMouseover="underlineIt('africa1');" onMouseout="clearIt('africa1');" onClick="showEl('africa');return false;">Africa</div></td>
				<td class="continent" width="15%"><div id="asia1" onMouseover="underlineIt('asia1');" onMouseout="clearIt('asia1');" onClick="showEl('asia');return false;">Asia</div></td>
				<td class="continent continentAus" width="17%"><div id="australia1" onMouseover="underlineIt('australia1');" onMouseout="clearIt('australia1');" onClick="showEl('australia');return false;">Australia</div></td>
			</tr>
			<tr>
				<td colspan="5">
					<div id="northAmerica" style="display:none;">
						<ul id="list">
							<li><a href="http://jacobs.hgcareers.com/js/" target="_blank">Canada</a></li>
							<!-- <li> Mexico</li> -->
							<li> United States</li>
						</ul>
					</div>
					<div id="europe" style="display:none;">
						<ul id="list">
							<li>Belgium</li>
							<li>Ireland</li>
							<li>Italy</li>
							<li>The Netherlands</li>
							<li>United Kingdom</li>
							<li><a href="http://www.jacobs.com/employment/jobselection.asp?region=Europe" target="_blank">Other Europe</a></li>
						</ul>
					</div>
					<div id="africa" style="display:none;">
						<ul id="list">
							<li>South Africa</li>
						</ul>
					</div>
					<div id="asia" style="display:none;">
						<ul id="list">
							<li><a href="">Asia</a></li>
							<li>Middle East</li>
						</ul>
					</div>
					<div id="australia" style="display:none;">
						<ul id="list">
							<li><a href="http://www.jacobs.com/employment/jobselection.asp?region=Australia">Australia</a></li>
						</ul>
					</div>
				</td>
			</tr>
		</table>
	</td>
</tr>
</table>
</div>
<MAP NAME="mainMap.gif">
<AREA SHAPE=POLY COORDS="9,5,70,5,69,11,61,18,63,19,65,19,70,25,70,14,72,12,75,14,79,14,82,18,84,16,96,28,96,28,92,28,88,30,88,31,90,33,92,34,90,36,87,38,84,38,84,39,80,40,79,47,74,50,75,60,72,60,70,59,70,53,66,53,59,55,58,63,61,65,63,65,63,62,69,62,69,67,68,69,71,69,73,70,73,76,77,76,79,77,76,81,71,81,66,74,62,74,60,71,55,71,53,69,50,68,47,66,47,63,43,63,42,60,36,54,36,50,32,46,30,41,14,65,5,59,5,56,30,40,31,28,22,19,12,19,5,25,0,25,4,20,2,20,0,16,7,7,9,5" OnMouseOver="showEl('northAmerica');return false;">
<AREA SHAPE=POLY COORDS="155,10,153,8,144,8,144,15,152,23,150,25,150,28,153,28,155,34,150,34,148,36,148,44,150,46,155,46,160,43,168,43,172,47,175,43,182,49,185,49,185,46,182,44,182,41,183,41,183,36,190,33,193,36,197,36,198,37,199,37,199,33,198,33,198,29,206,29,205,18,205,12,208,8,207,7,195,7,194,6,188,6,187,4,180,4,175,6,169,12,167,12,165,15,165,20,167,22,166,23,163,23,161,21,161,18,159,16,156,16" OnMouseOver="showEl('europe');return false;">
<AREA SHAPE=POLY COORDS="168,43,159,43,156,46,149,46,147,49,147,52,144,54,138,60,138,75,147,86,150,86,151,85,156,85,158,82,161,85,164,85,164,92,169,97,169,102,167,104,167,114,171,117,171,124,172,125,172,129,175,132,179,132,180,131,184,131,190,125,190,122,193,120,193,113,198,116,198,121,202,124,202,124,206,121,206,114,208,111,208,102,204,102,200,108,198,107,198,91,208,82,208,79,210,77,210,74,208,73,206,73,205,75,201,75,198,71,198,68,194,65,194,61,191,57,190,55,191,51,190,50,183,50,183,49,180,48,175,48,175,51,174,51,174,49,171,48,168,43" OnMouseOver="showEl('africa');return false;">
<AREA SHAPE=POLY COORDS="207,7,208,8,205,12,206,29,198,29,198,33,199,33,199,37,198,37,197,36,193,36,190,33,183,36,183,41,183,41,185,45,187,46,189,48,191,48,191,51,191,51,190,55,195,62,195,65,199,69,199,71,201,74,205,74,207,72,210,72,215,67,215,65,218,62,218,60,216,58,222,58,227,65,228,65,231,76,232,76,232,80,237,83,239,83,241,80,241,79,239,76,239,71,245,64,247,64,250,67,249,70,249,70,249,71,254,71,254,81,250,81,261,97,261,100,270,101,296,100,298,102,304,102,309,103,311,103,312,95,312,92,303,92,302,91,299,91,297,89,294,89,290,86,286,86,286,77,282,71,281,66,287,52,294,47,295,37,295,30,300,30,300,21,298,18,303,18,304,16,308,16,308,13,299,4,274,4,274,3,258,3,256,2,246,2,244,0,227,0,219,2,214,2,208,4" OnMouseOver="showEl('asia');return false;">
<AREA SHAPE=POLY COORDS="302,102,298,102,289,102,285,105,281,105,278,109,278,112,274,112,270,116,270,119,271,124,273,125,273,127,272,128,272,132,276,136,280,132,285,132,287,129,291,129,300,136,302,139,302,143,304,144,307,143,320,148,328,148,337,135,336,131,330,132,313,128,313,117,306,110,306,107,303,104,303,102" OnMouseOver="showEl('australia');return false;">
</MAP>
 
</body>
</html>

Open in new window

bullet.gif
mainMap.gif
0
saabStory
Asked:
saabStory
1 Solution
 
evrcoolCommented:
I am running IE7 and the script works fine for me. Ensure that you have Javascript capability turned on in IE7, by default it is turned off.
In IE7, goto Tools -> Internet Options and select the Security tab.
Choose the Zone that this site will be in, and click Custom Level
Scroll down to Scripting.
Under Active Scripting select Enable.
Click OK
0
 
saabStoryAuthor Commented:
Well I feel dumb.  But it's good to know.  I'll have to add a browser check on this specific page initially. I hate to make the user jump through hoops but we might have to initially until we can get a flash solution up and running.

Thanks for the help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now