saabStory
asked on
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.
mainMap.gif
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>
bullet.gifmainMap.gif
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the help.