サーチ…
構文
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
パラメーター
| タグ/属性 | 値 |
|---|---|
<img> | 以下に、 <img>使用するイメージマップ固有の属性を示します。通常の<img>属性が適用されます。 |
usemap | マップのnameにハッシュ記号が付加されています。たとえば、 name="map"場合、イメージにはusemap="#map"が必要です。 |
<map> | |
name | それを識別するマップの名前。イメージのusemap属性で使用する。 |
<area> | 以下は<area>特有の属性です。ときhref指定されている、作る<area>リンク、 <area>また、アンカータグ（のすべての属性をサポート<a>除く） ping 。それらをMDNの文書で見てください。 |
alt | イメージがサポートされていない場合に表示する代替テキスト。これはhrefが<area>も設定されている場合にのみ必要です。 |
coords | 選択可能な領域を概説する座標。 shape="polygon"場合、コンマで区切られた "x、y"ペアのリストに設定する必要があります（ shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ）。 shape="rectangle"場合、 left, top, right, bottom設定する必要があります。 shape="circle"場合は、 centerX, centerY, radius設定する必要があります。 |
href | ハイパーリンクのURL（指定されている場合）。これを省略すると、 <area>はハイパーリンクを表しません。 |
shape | <area>の形。設定することができるdefault全体画像（何選択するcoords必要属性なし）、 circle又はcirc円用rectangleまたはrect長方形のため、及びpolygon又はpolyコーナーポイントによって指定された多角形の領域について。 |
備考
イメージマップの紹介
説明
イメージマップは、クリック可能な領域が通常はハイパーリンクとして機能するイメージです。
イメージは<img>タグで定義され、マップは<map>タグで<area>タグで定義され、各クリック可能領域を示します。 usemap属性とname属性を使用して、イメージとマップをバインドします。
基本的な例
下の画像の各図形がクリック可能になるように画像マップを作成するには：
コードは次のようになります。
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
カーソルがポインタになったときに、ブラウザが領域を認識していることがわかります。 JSFiddleのライブ・デモをご覧いただくか、以下のデモンストレーションをご覧ください：
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow