<map>〜</map>
map（マップ）要素はarea要素と組み合わせて、クライアントサイドクリカッブルマップ表します。name属性は必須属性になります。
name属性はクリッカブルマップに名前を付与し、それを img 要素やobject要素に付与したusemap属性で指定することで、これら要素とクリッカブルマップとを関連付けることができる。
name属性には空白スペースを含むことはできず、値を空にすることも認められない。また、値の大文字 、小文字は区別されない。
name属性には空白スペースを含むことはできず、値を空にすることも認められません。また、値の大文字 、小文字は区別されない。
さらに、その名前は文書内の他のmap要素に付与された名前と同じになってはいけない。そのほか、id属性が同時に指定された場合は、name属性値とid属性値は同じものを付与する必要がある。
map要素で使用できる属性
グローバル属性
すべてのHTML要素で使用できる属性になります。
name属性
name属性は、要素に名前を付与します。この名前を使用して、JavaScriptから要素にアクセスしたり、iframe要素に付与した名前はリンクのターゲットに使用したりすることができる。
input要素におけるname属性
input要素に付与されたname属性値は、フォーム送信時に利用されます。また、name=”charset” と name=”isindex” という指定は特別な意味を持ちます。
details要素におけるname属性
details要素に付与された name属性値は、details要素をグループ化します。
複数のdetails要素にname属性で同じ名前を付けると、それらはグループと見なされ、相互に排他的な動作、つまり「1つを開いた時に他を閉じる」という動作を実現できます。
使用例
<html>
<figure>
<div id="map">
<img src="./map-japan-10210-1.webp" usemap="#ImageMap" alt="">
<map name="ImageMap">
<area shape="rect" coords="1068,234,1161,270" href="./hokkaido/" alt="北海道" title="北海道" target="_blank">
<area shape="rect" coords="869,995,929,1029" href="./tokyo/" alt="東京本店" title=""東京本店 target="_blank">
<area shape="rect" coords="546,1094,608,1132" href="./osaka/" alt="大阪支店" title="大阪支店" target="_blank">
<area shape="rect" coords="147,1164,206,1196" href="./fukuoka/" alt="福岡支店" title="福岡支店" target="_blank">
</map>
</div>
</figure>
</html>当社の本店・支店
map要素をご覧になるには、下のリンクをクリックしてください。
当社の本店・支店