画像の中にリンクを埋め込む
画像の中にリンクを埋め込む手法。
概要
img タグ、map タグ、area タグの３つを組み合わせる。
img タグで画像を配置し
map タグで設定を宣言し
area タグで詳細設定を行う。
img
一般の img タグとの相違点は
usemap 属性。
- <img id="sample" src="hoge.png" usemap="#mapname" />
usemap 属性に後続の map タグの name 属性値を設定。
ページ内リンクのときと似ている。
map
map タグは、設定を宣言する感じ。
よって、name 属性のみで実現可能。
- <map name="mapname">
- <area ・・・ />
- <area ・・・ />
- </map>
「mapname」は任意。
area
リンクを貼りたい 形状 と 領域 と リンク先 を指定する。
| 形状 shape |
内容 | 指定方法 coords |
|---|---|---|
| rect | 長方形 | (x,y,x,y) 指定した２点の座標を対角線とする長方形 |
| circle | 円 | (x,y,r) 中心の座標と半径を指定 |
| poly | 多角形 凹凸共に可能 |
(x,y,x,y,・・・) 全ての頂点の座標を指定 |
形状
shape 属性。
- <area shape="rect" />
- <area shape="circle" />
- <area shape="poly" />
領域
coords 属性。
- <area shape="rect" coords="10,15,210,185" />
- <area shape="circle" coords="100,75,30" />
- <area shape="poly" coords="30,50,10,85,70,65" />
リンク
href 属性。
- <area shape="rect" coords="10,15,210,185" href="hoge.html" />
- <area shape="circle" coords="100,75,30" href="hoge.html" />
- <area shape="poly" coords="30,50,10,85,70,65" href="hoge.html" />
マウスイベント
onclick 属性。
onmouseover 属性。
onmouseout 属性。
onmousedown 属性。
onmouseup 属性。
- <area shape="rect" coords="10,15,210,185" href="hoge.html" onclick="sample.src='click.png'" />
- <area shape="circle" coords="100,75,30" href="hoge.html" onmouseover="sample.src='mouseover.png'" />
- <area shape="poly" coords="30,50,10,85,70,65" href="hoge.html" onmouseout="sample.src='mouseout.png'" />
参考元サイト
TAG index：画像内に複数リンクを設定する
eWeb：マップ