WEB技術の辞書・解説・使用例

TOP > HTML >  HTMLタグ辞典 >  <map>
<map>  クリッカブルマップ 

画像の指定領域にリンクを張る（クリッカブルマップ）。

日本地図の画像から、大阪の部分をクリックすると大阪のページに移動するといった利用方法があります。
<AREA>タグで領域を設定します。

パラメータ設定例

name="xxx" …<IMG>タグのusermap属性で設定した名称を設定。

クリッカブルマップ設置例

STEP1 画像を設定し usermap="#test" のように usermap属性を設定(#を先頭に付与)。
<img src="/map.gif" width="80" height="80" usemap="#test" border="0">

STEP2 MAPタグのname属性を STEP1で設定したusemap属性(#なし)で設定。
<map name="test">
<area shape="circle" coords="20,20,10" href="/osaka.html">
</map>
<!-- マップになるイメージ -->
<img src="/html/sample/map.gif" width="450" height="125" usemap="#map1" border="0">

<!-- クリッカブルマップの本体部分 -->
<map name="map1">
<area shape="circle" coords="57,65,45" href="b.html">
<area shape="rect" coords="184,20,275,110" href="c.html">
<area shape="polygon" coords="394,21,437,53,421,104,367,104,350,53" href="d.html">
</map>

HTMLの一般属性

属性説明
class="～"クラス名を指定。使用例
id="～"IDを指定します。使用例
style="～"スタイルシートを直接記述。使用例
title="～"タイトルを指定します。
dir="ltr|rtl"文字の表示方向を指定。 ltr(左から右)、rtl(右から左)
lang="～"言語を指定。日本語の場合は"ja"