Menu
I have created a US image map using CSS but it won’t work in IE7, any help? I would really appreciate it.
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style>
@charset “utf-8”;
h1 { color:#002B4E;
}
#map-container {
width:576px;
height:370px;
position:absolute;
}
#map {
margin:0;
padding:0;
width:576px;
height:370px;
background: url(usmap.bmp) top left no-repeat #fff;
font-family:arial, helvetica, sans-serif;
font-size:8pt;
}
#map li {
margin:0;
padding:0;
list-style:none;
}
#map li a {
position:absolute;
display:block;
}
#map li a span { display:none; }
#map li a:hover span {
position:relative;
display:block;
left:0px;
top:0px;
padding:0px;
/* width: 200px;
text-decoration:none;
color:#000;
}
#map a.bc {
top:0px;
left:67px;
width:67px;
height:27px;
}
#map a.or {
top:37px;
left:28px;
width:75px;
height:95px;
}
#map a.wa {
top:7px;
left:48px;
width:60px;
height:41px;
}
#map a.ca {
top:86px;
left:21px;
width:72px;
height:133px;
}
#map a.nv {
top:97px;
left:54px;
width:40px;
height:126px;
}
#map a.id {
top:20px;
left:91px;
width:50px;
height:87px;
}
#map a.az {
top:171px;
left:86px;
width:70px;
height:60px;
}
#map a.co {
top:130px;
left:150px;
width:68px;
height:60px;
}
#map a.ut {
top:98px;
left:100px;
width:53px;
height:67px;
}
#map a.mt {
top:23px;
left:118px;
width:100px;
height:60px;
}
#map a.tx {
top:192px;
left:166px;
width:133px;
height:133px;
}
#map a.nm {
top:179px;
left:139px;
width:70px;
height:70px;
}
#map a.ok {
top:187px;
left:208px;
width:80px;
height:43px;
}
#map a.ks {
top:150px;
left:217px;
width:70px;
height:40px;
}
#map a.ak {
top:261px;
left:35px;
width:118px;
height:101px;
}
#map a.nd {
top:40px;
left:209px;
width:60px;
height:60px;
}
#map a.mn {
top:38px;
left:266px;
width:60px;
height:71px;
}
#map a.ia {
top:110px;
left:270px;
width:60px;
height:40px;
}
#map a.mo {
top:145px;
left:278px;
width:60px;
height:40px;
}
#map a.ar {
top:194px;
left:290px;
width:40px;
height:40px;
}
#map a.la {
top:238px;
left:294px;
width:40px;
height:60px;
}
#map a.on {
top:0px;
left:283px;
width:174px;
height:121px;
}
#map a.wi {
top:67px;
left:303px;
width:45px;
height:55px;
}
#map a.mi {
top:58px;
left:324px;
width:70px;
height:70px;
}
#map a.il {
top:120px;
left:317px;
width:35px;
height:66px;
}
#map a.in {
top:126px;
left:351px;
width:27px;
height:50px;
}
#map a.oh {
top:119px;
left:376px;
width:35px;
height:66px;
}
#map a.ky {
top:159px;
left:341px;
width:65px;
height:34px;
}
#map a.tn {
top:185px;
left:333px;
width:79px;
height:27px;
}
#map a.ms {
top:212px;
left:320px;
width:33px;
height:58px;
}
#map a.fl {
top:257px;
left:361px;
width:84px;
height:67px;
}
#map a.al {
top:210px;
left:353px;
width:34px;
height:59px;
}
#map a.ga{
top:208px;
left:377px;
width:50px;
height:52px;
}
#map a.sc{
top:203px;
left:400px;
width:46px;
height:35px;
}
#map a.nc{
top:175px;
left:390px;
width:81px;
height:38px;
}
#map a.va{
top:144px;
left:400px;
width:67px;
height:41px;
}
#map a.wv{
top:143px;
left:401px;
width:30px;
height:35px;
}
</style>
</head>
<body>
<div id=”map-container” >
<ul id=”map”>
<li><a class= “bc” title=”British Columbia”><span><img src=”bc-outline.png” border=”0″ /></span></a></li>
<li><a class=”or” title=”Oregon”><span><img src=”or-outline.png” border=”0″ /></span></a></li>
<li><a class=”wa” title=”Washington”><span><img src=”wa-outline.png” border=”0″ /></span></a></li>
<li><a class=”ca” title=”California”><span><img src=”ca-outline.png” border=”0″ /></span></a></li>
<li><a class=”id” title=”Idaho”><span><img src=”id-outline.png” border=”0″ /></span></a></li>
<li><a class=”az” title=”Arizona”><span><img src=”az-outline.png” border=”0″ /></span></a></li>
<li><a class=”nv” title=”Nevada”><span><img src=”nv-outline.png” border=”0″ /></span></a></li>
<li><a class=”co” title=”Colorado”><span><img src=”co-outline.png” border=”0″ /></span></a></li>
<li><a class=”ut” title=”Utah”><span><img src=”ut-outline.png” border=”0″ /></span></a></li>
<li><a class=”mt” title=”Montana”><span><img src=”mt-outline.png” border=”0″ /></span></a></li>
<li><a class=”tx” title=”Texas”><span><img src=”tx-outline.png” border=”0″ /></span></a></li>
<li><a class=”nm” title=”New Mexico”><span><img src=”nm-outline.png” border=”0″ /></span></a></li>
<li><a class=”ks” title=”Kansas”><span><img src=”ks-outline.png” border=”0″ /></span></a></li>
<li><a class=”ok” title=”Oklahoma”><span><img src=”ok-outline.png” border=”0″ /></span></a></li>
<li><a class=”la” title=”Louisiana”><span><img src=”la-outline.png” border=”0″ /></span></a></li>
<li><a class=”ak” title=”Alaska”><span><img src=”ak-outline.png” border=”0″ /></span></a></li>
<li><a class=”nd” title=”North Dakota”><span><img src=”nd-outline.png” border=”0″ /></span></a></li>
<li><a class=”mo” title=”Missouri”><span><img src=”mo-outline.png” border=”0″ /></span></a></li>
<li><a class=”ar” title=”Arkansas”><span><img src=”ar-outline.png” border=”0″ /></span></a></li>
<li><a class=”on” title=”Ontario”><span><img src=”on-outline.png” border=”0″ /></span></a></li>
<li><a class=”ia” title=”Iowa”><span><img src=”ia-outline.png” border=”0″ /></span></a></li>
<li><a class=”mn” title=”Minnesota”><span><img src=”mn-outline.png” border=”0″ /></span></a></li>
<li><a class=”mi” title=”Michigan”><span><img src=”mi-outline.png” border=”0″ /></span></a></li>
<li><a class=”wi” title=”Wisconsin”><span><img src=”wi-outline.png” border=”0″ /></span></a></li>
<li><a class=”il” title=”Illinois”><span><img src=”il-outline.png” border=”0″ /></span></a></li>
<li><a class=”in” title=”Indiana”><span><img src=”in-outline.png” border=”0″ /></span></a></li>
<li><a class=”oh” title=”Ohio”><span><img src=”oh-outline.png” border=”0″ /></span></a></li>
<li><a class=”ky” title=”Kentucky”><span><img src=”ky-outline.png” border=”0″ /></span></a></li>
<li><a class=”tn” title=”Tennessee”><span><img src=”tn-outline.png” border=”0″ /></span></a></li>
<li><a class=”ms” title=”Mississippi”><span><img src=”ms-outline.png” border=”0″ /></span></a></li>
<li><a class=”al” title=”Alabama”><span><img src=”al-outline.png” border=”0″ /></span></a></li>
<li><a class=”ga” title=”Georgia”><span><img src=”ga-outline.png” border=”0″ /></span></a></li>
<li><a class=”sc” title=”South Carolina”><span><img src=”sc-outline.png” border=”0″ /></span></a></li>
<li><a class=”nc” title=”North Carolina”><span><img src=”nc-outline.png” border=”0″ /></span></a></li>
<li><a class=”va” title=”Virginia”><span><img src=”va-outline.png” border=”0″ /></span></a></li>
<li><a class=”wv” title=”West Virginia”><span><img src=”wv-outline.png” border=”0″ /></span></a></li>
<li><a class=”fl” title=”Florida”><span><img src=”fl-outline.png” border=”0″ /></span></a></li>
</ul>
</div>
</body>
</html>