気の向くままに辿るIT/ICT/IoT
HTML/XHTMLタグ・要素・属性・属性値

イメージマップ img/map/areaタグ・要素 usemap/name(id)/shape/coords属性

ホーム前へ次へ
イメージマップ『imgタグusemap属性/mapタグ/areaタグ編』

img usemap/map name|id/area shape, coords

Image Map/イメージマップとは

 ホームページに画像や図柄を表示してその一部をクリックすると他のページにジャンプするサイトをご覧になったことはありませんか?

 次のように画像にメニューがテキストで書いてある場合もあります(クリックしてみて下さい)。

html css javascript cgi ネットショップ構築 seo

 こんなこと一体どうやってやるのでしょうか?

 実はこれには画像を表示する際に使用した

<img src="">

と更に他の2つのタグを使ってできるんです。

 画像表示の章では記述しませんでしたが、imgタグには『USEMAP』属性が存在します。これは「画像のある部分を使いますよ」とブラウザに伝える為の
意思表示です。

つまり、

<img src="お好きな画像ファイル名" usemap="#マップの名前">

とします。

そして

<map name="マップの名前">~</map>

aタグの『NAME』属性を指定した場所を参照する為に『#』+『NAME属性の設定名』、つまり『HREF="#"』としたのを覚えてますか?

 これと同じように<IMG>タグを使用して『USEMAP』属性で設定名を参照する場所は<MAP>タグの『NAME』属性の設定名で『USEMAP』ではこの設定名の先頭に『#』を付加します。

 尚、XHTMLタグではname属性はなくこれに代わるものとしてHTMLでも利用可能なid属性を使用します。

 更に<map>タグの「~」の部分には以下のような<area>タグ(複数可)を設定します。

<area shape="" coords="" href="リンク先のURL" alt="リンク先の説明">

『SHAPE=""』属性には以下の内いずれか1つを指定します。

・default(全体)

・rect(四角形)

・circle(円)

・poly(多角形)

『COORDS=""』属性は以下の通り、画像を中心に数値(ピクセル単位)を設定します。

※数値間は半角カンマで区切る

・default(全体)の場合

設定なし

・rect(四角形)

左上のX座標,Y座標右下のX座標,Y座標

・circle(円)

中心のX座標,Y座標半径

・poly(多角形)

全ての角の座標を『X座標,Y座標』と順次指定し、最後の座標は開始点と同じ座標を指定して図形を閉じる

全体としては次のようになります。

「同じ画像内で四角形と円と多角形ここでは三角形の場合」

<img src="四角形.jpg" usemap="#testmap">

  <map name="testmap">

      <area shape="rect" coords="45,10,145,200" href="リンク先URL1" alt="URL1へ">

      <area shape="circle" coords="80,5,10" href="リンク先URL2" alt="URL2へ">

      <area shape="poly" coords="150,20,100,10,180,5" href="リンク先URL3" alt="URL3へ">

  </map>

 簡単にご説明しますと

A)『四角形.jpg』画像を表示して画像内の一部をクリックして

  リンク先に飛ぶようにする

B)画像の中でクリックできるマップ(領域)を『四角形』と『円』、

  『三角形』と3箇所つくる

C)画像の中でクリックできるマップ(領域)に『testmap』という

  名前をつける

D)『四角形.jpg』画像からC)のマップ名を参照する

E)それぞれ『リンク先のURL1~3』にジャンプすることとし

  『URL1へ』等、画像が表示できない場合に備えて説明を入れる

 ということになります。

 もちろん「.jpg」でなくても構いません(画像の保存形式)。

セレクトボックスでメニューを表示し選択したページへ飛びたい!

各種HTMLとHTMLタグ/要素・属性・属性値

ホーム前へ次へ