Skip to content Skip to sidebar Skip to footer
Home / Html

Make A Border To The Areas In The Image Maps

Post a Comment
I am trying to add a border around an Image Map Areas. Here is an example of an Image map with 3 sectors.

Solution 1:

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.


Solution 2:

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.


Post a Comment for "Make A Border To The Areas In The Image Maps"