<map>, <area>

要素の説明

<map>, <area>は、画像の一部を他ページにリンクさせる機能を構成するための要素です。<map>にはname属性で名前を指定し、<img>にはusemap属性を指定して(#に続けて名前をつけます)対応させます。なお、<area>には終了タグがありません。

指定できる属性

id
ページ内に１つ、特別な役割を与える時に指定します。
class
ページ内に複数、特別な役割を与える時に指定します。
name
<map>に指定する属性。この属性で<img>に指定したusemap属性と対応させます。
alt
<area>に指定する必須属性。alt="name"のように、画像が何らかの不具合で表示されなかったときに表示させる文字を指定します。
href
<area>に指定する属性。href="./"のように、別ページのアドレスを指定します。
shape
<area>に指定する属性。リンクさせる画像の形状を指定します。rect(四角形), circle(円), poly(多角形), default(画像全体)の4種類があります。
coords
<area>に指定する属性。shape属性で決めた形に対応した座標を指定します。
rectの場合： 左上X座標, 左上Y座標, 右下X座標, 右下Y座標
circleの場合： 中心X座標, 中心Y座標, 半径
polyの場合： X座標1, Y座標1, X座標2, Y座標2, ... , X座標N, Y座標N, X座標1, Y座標1

中に入れられる要素

<map>には、<area>を入れることができます。

<area>に入れられる要素はありません。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>サンプルページ</title>
</head>

<body>
 <div id="header">
  <h1>サンプルページ</h1>
  <p>このページはサンプルを表しています。</p>
 </div>
 <h2>コンテンツ</h2>
 <div>
  <p>大文字Pの周りと、大文字Tの形にリンクを貼っています。</p>
  <img src="../img/banner/pluto01.gif"
 alt="banner1" width="200" height="40" usemap="#map">
  <map name="map">
   <area href="list01.html"
 alt="HTML list" shape="rect" coords="42, 11, 61, 30">
   <area href="list01.html"
 alt="HTML list" shape="poly" 
coords="114, 11, 134, 11, 134, 15, 126, 15,
 126, 30, 122, 30, 122, 15, 114, 15, 114, 11">
  </map>
 </div>
</body>

</html>