Twitter Bootstrap is screwing up my imagemap - Anyone else have this issue?

Question

First off - this is my first question ever (I'm still a beginner) and I can't say how much I appreciate this site and all the help I've found on here. Hopefully every question I ask can help someone else too :)

I realize not many people use imagemaps any more but I have one and twitter bootstrap (version 3.0.0) is screwing up my coordinates - putting the links in the wrong places. I can make it work with the following code but then it wont resize to fit the screen. Any tips?

<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
    max-width:none;
    width:auto;
    display: inline;

}

</style>

Here is a snippet of the actual imagemap code

<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
 <Map id="map_ID" name="map">
   <AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
   <AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
   <AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">

Please be more specific about how the links are incorrect. Better, create a fiddle demonstrating the problem: http://jsfiddle.net — isherwood, Oct 23 '13 at 19:41
A note: You will struggle to have the image resize and the MAP still work as those COORDS are hardcoded and won't scale as the image does. — Ryan McDonough, Oct 23 '13 at 19:45
@RyanMcDonough is correct; MAP is not compatible with scaled images. However, just an idea: Skip the hardcoded declarations and instead use jquery to detect the image size as scaled on the screen, then calculate the coordinates as a percentage converted to pixels. So if you know the top coordinate is 4% right and 11% down, then you can determine (roughly) how many pixels over/down that would be, based on the scaled size. It wouldn't be accurate to the pixel, but you might get close. I can't see any other way. — Phil Nicholas, Oct 23 '13 at 20:52
Option 2: Keep the tags and use jQuery to re-write the COORDS attribute values by recalculating them based on the scaling percentage. So if the image is scaled down by 75%, then each figure would be reduced by 75%, then re-written. — Phil Nicholas, Oct 23 '13 at 20:53
Sorry it took so long to get back here - I made a fiddle demonstrating how it should work - Apparently I may have been wrong about it being twitter BS that was causing the entire problem - When I resize the screen multiple times it still seems to have trouble putting the links exactly where on the image they're supposed to go, but with twitter bootstrap they initially show up in the wrong place. Is there a better way than imagemaps? Here's the working fiddle without any css. http://fiddle.jshell.net/QXSFK/4/ — Addameus, Oct 29 '13 at 21:13

score 1 · Answer 1 · edited May 23 '17 at 11:43

I'd recommend, rather than an image map, make 3 divs that are links with the following HTML and accompanying CSS.

<div id="box_a">
    <a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
    <a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
    <a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>

Use percentages to define the coordinates. Given that your X₁ and X₂ coordinates are the same for the links in your image map, the following example (with different %s to actually cover your image correctly) should work.

#box_a, #box_b, #box_c {
    margin-left: 10%;
    margin-top: 5%;
    height: 15%;
    width: 25%;
}
.box_link {
    display: block;
    height: 100%;
    width: 100%;
}

You should check out this page to learn more about making div links. I would also suggest using NewMatGuide.png as a background-image and define the size of #img_ID.

Twitter Bootstrap is screwing up my imagemap - Anyone else have this issue?

1 Answers1