For a website I am making for my job, I wanted to use mostly CSS coding, but when I saw all the issues involving CSS maps I took the advice of others and stuck with the traditional HTML style of maps. However, the mapping code wont work, the links remain unclickable. I’m not sure if this is an issue with the CSS/HTML combination or not, but my code is as follows for the HTML part:
<body>
<div id="header">
<div id="menu">
<img src="http://i74.photobucket.com/albums/i266/nanashiwolf/header.png" width="770" height="100" alt="logo" border="0" usemap="#headermap" />
<map name="#headermap">
<area shape="rect" coords="156,67,156,83,225,83,225,67" href="links.html" alt="Links" />
<area shape="rect" coords="239,67,239,83,309,83,309,67" href="links.html" alt="Links" />
<area shape="rect" coords="324,67,324,83,392,83,392,67" href="links.html" alt="Links" />
<area shape="rect" coords="403,67,403,83,511,83,511,67" href="links.html" alt="Links" />
<area shape="rect" coords="526,67,526,83,588,83,588,67" href="links.html" alt="Links" />
<area shape="rect" coords="602,67,602,83,662,83,662,67" href="links.html" alt="Links" />
<area shape="rect" coords="675,67,675,83,736,83,736,67" href="links.html" alt="Links" />
</map>
</div></div>
Following that immediately is another open div for the body of the website, and far as I know there are no issues with that. I was thining maybe it was an issue with the menu tag, but this is all I have for menu:
#menu {
float: left;
width: 767px;
height: 200px;
}
I’m not really sure what the problem is because I’ve used maps before and they always work, so the only thing I’m thinking of is the CSS is conflicting it somehow. If I’m looking at the wrong CSS though and another tag would be causing the problem I can post that as well.
Right now I’m viewing this in IE (I havent yet downloaded FF but I will), so I dont know if that could also be an issue.
The map
nameparameter shouldn’t have a#in it:It’s only necessary in the usemap directive:
By putting
#into the map’s name, you’d actually have to useusemap="##headermap"instead.