スポンサード リンク
area要素
イメージマップの中で領域を作成できます
画像の一部分をクリックできるようになります。リンクを作ることも可能です
地図でお店を紹介したり、画像を使ったメニュー画面なども作ることができます
img要素で画像を表示していから、map要素とarea要素でイメージマップを作ります
map要素にname属性を使ってイメージマップの名前をつけます
img要素にusemap属性を使ってイメージマップの名前を指定すると画像をイメージマップとして使えるようになります
area要素にhref属性でリンク先のurlの指定、coord属性で座標の指定をします
使い方(書式)
<area>
area要素
対応ブラウザ | |
要素の種類 | インライン要素 |
内容となる要素 | area要素 |
属性 | 説明 |
shape属性 | イメージマップのリンクの有効範囲の領域の形を指定します 値には、rect(四角形)、circle(円形)、poly(多角形)、default(領域全体) |
coords属性 | イメージマップ範囲となる領域の座標を指定します
画像の左上の基点にしてx(横の座標)、y(縦の座標)を指定します rect(四角形)作りたい領域の左上のx,y座標,作りたい領域の右下のx,y座標 circle(円形)作りたい領域の中心のx座標,y座標、円の半径 poly(多角形)作りたい領域の1つ目のx,y座標、2つ目のx,y座標、3つ目のx,y座標と増やしていきます。何個でも増やせます |
href属性 | 有効領域をクリックした後のリンク先のurlを指定します |
alt属性 | 画像が表示されなかった場合に領域の場所に表示される代替テキスト
※area要素の必須属性です |
nohref属性 | イメージマップの領域にリンクがないことを示します |
target属性 | イマージマップ内のリンクの表示方法を指定できます 値には、_blank(新しくウィンドウを開く)、_self(現在のウィンドウに表示)、_top(一番上のウィンドウに表示)、_parent(親フレームに表示) |
共通属性 | html共通属性 |
イベント属性 | htmlイベント属性 |
実際の指定方法
1行目がimg要素で画像の指定、map要素のname属性で指定した名前をusemap属性で受け取って画像をイメージマップとして使えるようにしますhtml
<img src="map.gif" alt="" width="200" height="200" usemap="#hoge"> <map name="hoge"> <area shape="rect" coords="150,50,200,100" href="index.html" title="ここなのよ"> </map>
実際の表示
関連リンク
img要素