area要素

TOPページに戻る > html入門

スポンサード リンク

area要素

イメージマップの中で領域を作成できます
画像の一部分をクリックできるようになります。リンクを作ることも可能です
地図でお店を紹介したり、画像を使ったメニュー画面なども作ることができます
img要素で画像を表示していから、map要素とarea要素でイメージマップを作ります
map要素にname属性を使ってイメージマップの名前をつけます
img要素にusemap属性を使ってイメージマップの名前を指定すると画像をイメージマップとして使えるようになります
area要素にhref属性でリンク先のurlの指定、coord属性で座標の指定をします

使い方(書式)

<area>

area要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 インライン要素
内容となる要素 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属性で受け取って画像をイメージマップとして使えるようにします
2行目がmap要素のname属性でイメージマップの名前を指定
3行目で画像の中にリンクを作成しています。属性で指定しているのは、領域の形、領域の幅、リンク先、ツールチップの表示です

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>

実際の表示


その他のデザインはcssでスタイルを指定

関連リンク

img要素
area要素


(C)2012 ホームページ作成無料