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><divstyle="position:relative"><imgsrc="trees.gif"width="1727"height="1434" /><ahref="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"