5

イメージ マップ エリアの周囲に境界線を追加しようとしています。

以下は、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ピクセルの境界線を配置できれば、それは素晴らしいことです.

4

2 に答える 2

9

ストレートな HTML/CSS でこれを行う方法はありません。IE6/7 ではサポートされていませんが、SVG を使用できます。

この JavaScript プラグインが使用されていることがあります: http://www.outsharked.com/imagemapster/特にそのstroke設定。

于 2012-05-08T13:27:39.547 に答える
-1

できる最善のことは次のようなものだと思います

<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>(ポリゴン) の一部が失われますが、 のすべてのスタイル機能が得られます<a>。

于 2015-08-15T15:27:31.980 に答える