リファレンス

<map>要素の使い方・サンプルコード

 

<map>

<map>要素は、<img>要素<object>要素で表示した画像の上にイメージマップ (クリック可能な領域)を作成することができます。

<area>要素と組み合わせて使うことで、画像の上に「円形・四角形・多角形」のリンクを複数作成することができます。
 
 
 

属性

name

画像とイメージマップを関連付けるために、<map> 要素の name 属性の値と <img> や <object> 要素に指定した usemap 属性の値を一致させます。
 

同じ HTML 文書内に複数の <map> 要素があるときに、同じ name 属性値を使うことはできません。

<map> 要素に id 属性を指定した場合は、id 属性値と name 属性値を同じにする必要があります。
 

以下のコードでは、name 属性と usemap 属性の値を同じ「mymap」にしています。

<map name="mymap">
  <area shape="circle" coords="50, 50, 10" href="https://sample.com">
</map>
<img usemap="#mymap" src="sample.png" alt="Image" width="100" height="100" />

 
 

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら
 
 
 

使用例

イメージマップのデモ(実際にクリックすることができます)

 

<map name="sample">
  <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
  <area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
  <area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
</map>
<img usemap="#sample" src="image.jpg" alt="Image"/>

 

このコードの詳しい解説は「<map>と<area>要素を使ったイメージマップの作り方」をお読みください。
 
 
 

対応ブラウザ

 
 
 

関連するタグ

 

HTML タグ一覧はこちら

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
Code for Fun プログラミング講座

 

 
Code for Fun プログラミング講座では「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで学ぶことができます。

  • 何か一つ形にしてみたい!
  • 次に何をして良いか分からない…
  • プログラミングに挫折しそう…

という方にオススメです。

詳しくみる

guest

CAPTCHA


0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx