map要素

TOPページに戻る > html入門

map要素

イメージマップを作成できます
画像の一部分をクリックできるようになります。リンクを作ることも可能です
img要素で画像を表示していから、map要素とarea要素でイメージマップを作ります
map要素にname属性を使ってイメージマップの名前をつけます
img要素にusemap属性を使ってイメージマップの名前を指定すると画像をイメージマップとして使えるようになります
area要素にhref属性でリンク先のurlの指定、coord属性で座標の指定をします

使い方（書式）

<map></map>

map要素

対応ブラウザ
要素の種類	インライン要素
内容となる要素	area要素

属性	説明
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

1行目がimg要素で画像の指定、map要素のname属性で指定した名前をusemap属性で受け取って画像をイメージマップとして使えるようにします
2行目がmap要素のname属性でイメージマップの名前を指定
3行目で画像の中にリンクを作成しています。属性で指定しているのは、領域の形、領域の幅、リンク先、ツールチップの表示です

html

<img src="map.gif" alt="" width="200" height="200" usemap="#hoge">
<map name="hoge">
<area shape="rect" coords="150,50,200,100" href="index.html" title="ここなのよ">
</map>

実際の表示

その他のデザインはcssでスタイルを指定

関連リンク

img要素
area要素