Geek asks and answers

Make border for areas on image maps

I am trying to add a border around areas of an image map.

Here is an example image 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 I could place a border with 2 pixels around the area, that would be great.

+3
source share
2 answers

There is no way to do this using direct HTML / CSS. You can use SVG, although this is not supported by IE6 / 7.

You can use this JavaScript plugin: http://www.outsharked.com/imagemapster/ , in particular its settings stroke.

+5
source

I think the best thing 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 flexibility <area>s, (polygons), you get all the features of style <a>s.

-1

More articles:


All Articles