ぱそおーるHTML講座

画像に複数のリンクを設置


<map>タグは<img>タグと組み合わせて使います。
一つの画像に複数のリンクをはる事が出来るようになります。
リンクの指定方法は四角形、円形、多角形から選択出来ます。
まずはリンクをはりたい画像を<img>タグを使って挿入しましょう。
<img src="map.gif" width="291" height="292" border="0" usemap="#sample" alt="サンプルです">
usemapで名前を決めます。任意のもので構いません。
続けて次のタグを挿入します。

<map name="sample">←どの画像に設定するのかを決定するためのものです。
<area href="maptag.htm" shape="rect" alt="四角形です" coords="58,1,98,40">
<area href="maptag.htm" shape="circle" alt="円形です" coords="204,20,20">
<area href="maptag.htm" shape="poly" alt="多角形です" coords="229,251,266,267,244,291,206,276"></map>

これで↓のようなリンクを形成出来ます。
サンプルです 四角形です 円形です 多角形です
<area 以下
href=リンク先を指定
shape=リンク枠の形の指定
rect=四角形
circle=円形
poly=多角形
coorde=位置を指定しています。
HOMEへ