イメージマップ 【<img src="〜" usemap="〜">】

ブラウザで表示した時の見え方

マップ HOME PROFILE DIARY

ソースサンプル

<img src="./img/map.gif" alt="マップ" usemap="#map" border="0">
<map name="map">
<area shape="circle" coords="51,50,44" alt="HOME" href="http://www.aichan.biz/">
<area shape="circle" coords="149,51,44" alt="PROFILE" href="http://www.aichan.biz/ai/">
<area shape="circle" coords="248,51,44" alt="DIARY" href="http://www.aichan.biz/blog/">
</map>

[ 黒※説明中のタグ 紫※省略可能なタグ 赤※変更可能 緑※文章など ]

解説

map
name名前イメージマップの名前の指定
属性名機能

area
shaperect領域を四角形で指定する場合
 circle領域を円で指定する場合
 poly領域を多角形で指定する場合
coordsピクセル値または%領域の座標を指定する
altテキスト代替を指定する
hrefURLリンク先を指定する
tabindex0〜32767Tabキーを押して移動する順番を指定する
accesskeyアルファベットショートカットキーを指定する
targetフレームまたはウインドウ名リンク先を表示させる場所を指定する
属性名機能

coords属性の設定
coords(rect)ピクセル値四角形の左上のX座標、左上のY座標、右下のX座標、右下のY座標の順番に指定する
coords(circle)ピクセル値円の中心のX座標、中心のY座標、半径の順番に指定する
coords(poly)ピクセル値多角形の各頂点の座標をX座標、Y座標の順番に指定する
属性名機能