5

I am trying to add a border around an Image Map Areas.

Here is an example of an Image map with 3 sectors.

<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>

If somehow i could place a border with 2 pixel with around the area's it would be great.

1
  • Easiest would be to edit the image. There's no way to automatically add borders. May 8, 2012 at 13:21

2 Answers 2

9

There is no way to do this with straight HTML/CSS. You can with SVG though that is not supported by IE6/7.

You may find this JavaScript plugin of use: http://www.outsharked.com/imagemapster/ particularly its stroke settings.

-1

I think the best that can be done is something like

<body>
  <style> a { border: 2px solid rgba(255,0,0,.1); }
          a:hover{ border:2px solid rgba(0,0,255,.3); }</style>
  <div style="position:relative">
    <img src="trees.gif" width="1727" height="1434" />
    <a href="http://www.trees.com/furniture.html"
         style="display:block; width:247px; height:66px; left: 48px; top: 275px;
         position:absolute;"></a>
  </div>
</body>

Although you lose some of the flexibility of <area>s, (polygons), you gain all the style capabilities of <a>s.

3
  • This poses issues with responsive setups
    – fseminario
    Aug 25, 2015 at 18:53
  • @fseminario Right, this is something of a minimum example. To make it responsive, you have some javascript that listens to resize events and scales the sizes appropriately. I currently have a solution like this running as expected. Aug 26, 2015 at 17:49
  • @fseminario it doesn't if you use percentage units. I used this technique to create a responsive map of the UK with map markers that scaled perfectly.
    – Mike
    Feb 8, 2017 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.