Search code examples
htmlcssimagemap

Can't get map tag to work correctly

I'm having a really hard time getting the mapping tag to work correctly for an image. Wondering if someone can take a look and see what I'm doing wrong. The problem i'm having is getting the map to even appear. Images all load fine but when I map and link a certain part (or the entire image) nothing appears.

HTML:

<div id="leftColumn">
<img src="/img1.jpg"><br><br>
<img src="/img2.jpg"><br><br>
<img src="/img3.jpg" usemap="#Map2" border="0">
<map name="Map2">
<area shape="rect" coords="80,298,371,377" href="www.SomeSite.com">
</map><br><br>
</div>

CSS if it matters:

#leftColumn {
    height: 100%;
    width: 61%;
    float: left;
}

I think this is correct but maybe something from dreamweaver to the actual site isn't properly doing the coords? I have no idea but I've been stuck at this..

Solution

  • There might be several issues:

    • the image file is linked as it is in the root of the webserver, try ./img3.jpg
    • make sure dimensions of the mapped image is more than the map coordinates, ie in this case 298x377 px
    • you set the div#leftColumn to be width: 61%; of what?, does the image fit to that width?

    EDIT

    • The image is 1530 x 380 pixels (fixed dimensions)
    • Your map has 291 x 79 pixels (fixed dimension)
    • The image is in dynamically resized element to 61 % of width of parent element

    Solution:
    - keep fixed size of the image / parent element.. - enlarge the map dimensions