まわりみち(仮)

迷子ともいうけどキニシナイ

イメージマップを作る(基礎編)

今回はイメージマップの作り方について紹介していきます。需要があるかは怪しいところですが、基本的なことから説明していきます。

イメージマップとは

簡単に言うと、画像の中にリンクできる場所が複数あることです。

センター北駅の周辺地図 yotsubakoのリンクモザイクモールのリンクノースポートモールのリンク

具体的には上の地図を見ればわかると思います。以前使ったセンター北の地図で恐縮ですが、ここでは各ショッピングモールの場所にリンクがあります。地図画像の中にリンク可能な範囲を指定することでイメージマップが作れます。ちなみに、各々のショッピングモールのサイトにリンクできます。

イメージマップの作り方(基本的なこと)

では、基本的な作り方を追っていきましょう。

大まかな枠組み

イメージマップ:枠組み
<img name="map_test" src="map_test.jpg" width="350" height="250" usemap="#map_test" alt="センター北駅の周辺地図" />
<map name="map_test">
中略
<map/>

まずimgタグで画像を指定します。次にイメージマップを定義するmap要素をつけます。この時にname="マップ名"で名前を決めておきます。この名前をimgタグ内でusemap="#マップ名"で入れておく必要があります。ここではmap_testという名前を指定してます。これでイメージマップの枠組みができました。

areaタグ関連

続いてリンク範囲の指定をしていきます。指定にはareaタグを使います。

areaタグ
<area href="リンク先URL" alt="代替テキスト" shape="リンク範囲の形" coords="範囲の座標" >

リンク指定でおなじみのhref属性にはURLを入れ、alt属性には何のリンクであるか補足説明を記述しておきます。

shape属性にはリンク範囲の形を指定します。3つ種類がありますが(後述)、今回の地図リンクでは矩形のrectを使いました。
coords属性で、画像内のリンク範囲の座標を指定します。座標を入れる時、coords="x(左端が0,右に行くほど数値が大きくなる),y(上端が0,下に行くほど数値が大きくなる),x,y"といった感じでx座標とy座標を交互に指定します。矩形の場合は左上、右下のx,y座標が必要です。

地図で指定した座標は下の画像の通りです。

地図の座標
地図の座標
<area shape="rect" alt="yotsubakoのリンク" coords="199,59,223,95" href="http://www.yotsubako.com/" />
<area shape="rect" alt="モザイクモールのリンク" coords="55,28,153,83" href="http://www.mosaicmall.co.jp/" />
ノースポートモールのリンク
<map/>

ちなみに、座標はwindowsペイントの画面左下に表示されます。本音を言うとわざわざ調べるのは結構メンドクサイものです。実はdreamweaverやfireworksを使えば、座標を知らなくても作成できます。詳しくは…近日紹介します。

矩形以外の形

shape属性で、今回は矩形:rectを使いましたが、ほかに円形:circle多角形:polyがあります。円形の場合は中心点のx,y座標と半径の長さを。多角形は各頂点のx,y座標を指定します。

座標:矩形以外の形
多角形円形  

ソースまとめ

それでは、今回作成したイメージマップ地図のコードを記しておきます。

イメージマップ地図のソース
<img name="map_test" src="map_test.jpg" width="350" height="250" usemap="#map_test" alt="センター北駅の周辺地図" />
<map name="map_test">
<area shape="rect" alt="yotsubakoのリンク" coords="199,59,223,95" href="http://www.yotsubako.com/" /gt;
  
<area shape="rect" alt="モザイクモールのリンク" coords="55,28,153,83" href="http://www.mosaicmall.co.jp/" /gt;
<area shape="rect" alt="ノースポートモールのリンク" coords="236,116,324,224" href="http://www.northport.sc/" /gt;
<map/>

以上、イメージマップ作成の紹介でした。Web作成の解説は初めてで、少々グダグダな感じがありますが、ネタができ次第紹介したいと思います。

広告を非表示にする