Сделайте границы для областей на картах изображения

Я пытаюсь добавить границу вокруг Области Карты Изображения.

Вот пример карты изображений с 3 секторами.

<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>

Если бы я как-то мог разместить границу с 2 пикселями вокруг области, это было бы здорово.

Источник

2 ответа

Решение

Нет никакого способа сделать это с прямым HTML/CSS. Вы можете с SVG, хотя это не поддерживается IE6/7.

Вы можете найти этот плагин использования JavaScript: http://www.outsharked.com/imagemapster/ частности, его stroke Настройки.

Источник

Я думаю, что лучшее, что можно сделать, это что-то вроде

<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>

Хотя вы теряете часть гибкости <area>s, (полигоны), вы получаете все возможности стиля <a>s.

Источник
Другие вопросы по тегам