イメージマップ内の領域に境界線をつける

イメージマップ領域の周りに境界線を追加しようとしています。イメージマップ内の領域に境界線をつける

ここに、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ピクセルの境界線を領域の周りに置くことができればそれは素晴らしいことでしょう。

出典

2012-05-08 Dror

最も簡単なのは、画像を編集することです。自動的に罫線を追加する方法はありません。 –

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

このJavaScriptプラグインは、http://www.outsharked.com/imagemapster/（特にstroke）の設定で使用されています。

出典

2012-05-08 13:27:39

-1

私が行うことができる最高のは、あなたが<area> S、（ポリゴン）の柔軟性の一部を失うが、あなたは<a> Sのすべてのスタイル能力を獲得

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

のようなものだと思います。

出典

2015-08-15 15:27:31

これはレスポンシブな設定に問題があります – fseminario

@fseminarioこれは最小の例です。それを反応させるために、イベントのサイズを変更するのを聞き、サイズを適切に調整するJavaScriptをいくつか用意しています。私は現在、このようなソリューションを期待どおりに実行しています。 –

@fseminarioパーセンテージ単位を使用している場合は表示されません。この手法を使って、完全に拡大されたマップマーカーで英国の対応マップを作成しました。 – Mike

イメージマップ内の領域に境界線をつける

答えて

関連する問題