極意(3)イメージマップを極める

イメージマップとは、一枚の画像のある部分をクリックしてリンク先にジャンプする機能を言います。別名「クリッカルマップ」とも言います。通常のリンクを張ったテキスト文言をクリックしてジャンプする代わりに、地図みたいな画像のある部分をクリックしてジャンプするから、イメージマップまたはクリッカルマップと言います。

実際の例として、筆者もよく利用するのですが、モスバーガーの店舗検索の例として、デフォルメされた日本地図(下記)上の都道府県名をクリックして、該当地域の店舗を探すことがありますが、正にこれがイメージマップです。但し、下図にはリンクは張られていませんので、クリックしても画面上なにも変化がありません。

イメージマップ


実際にイメージマップを作成してみる

前記の日本地図では、テストする上でデータ量や手間を考えると荷が重いので、もう少し簡単な例として、下記の画像リンクの例でテストした結果を公開します。考え方は同じですので、簡単な例で基本となるスキルを身につけて欲しいと思います。

但し、下記のマップの内、標準デザイン・パターン集とプレミアム・デザイン・テンプレートの2つは、既に存在しないサイトですので、実際には無関係なページがリンクされています。

藤心パソコン倶楽部 藤心QHMクラブ 藤心DOUGAドットコム 試作見本サイト Photo Flash 動作確認サイト HPのスケルトン 標準デザイン・パターン集 プレミアム・デザイン・テンプレート



各図形に別々の外部リンクが張ってあります。図形の内部をクリックして動作を確認してみて下さい。戻りは、リンク先の画面でブラウザの「戻る」ボタンで、元の画面に戻ってきます。

上記のおまじないです

#html{{
<IMG src="swfu/d/ImageMap_20131028.JPG" usemap="#linkmap" width="506"  height="467" border="0">
<MAP name="linkmap">
<AREA shape="rect" coords="43,28,476,87" href="http://fujigowp.info/" alt="藤心パソコン倶楽部" title="藤心パソコン倶楽部">
<AREA shape="poly" coords="53,116,175,116,197,209,29,209,53,116"  href="http://fujigopc.com/qhm_99999999/" alt="藤心QHMクラブ" title="藤心QHMクラブ">
<AREA shape="circle" coords="262,165,61" href="http://fujigowp.info/douga/" alt="藤心DOUGAドットコム" title="藤心DOUGAドットコム">
<AREA shape="poly" coords="398,106,478,214,317,214,398,106" href="http://fujigowp.info/sisaku/" alt="試作見本サイト" title="試作見本サイト">
<AREA shape="poly" coords="40,244,177,244,152,342,17,342,40,244" href="http://fujigokoro.xsrv.jp/pflash/" alt="Photo Flash 動作確認サイト" title="Photo Flash 動作確認サイト">
<AREA shape="rect" coords="180,243,337,341" href="http://fujigowp.info/skeleton/" alt="HPのスケルトン" title="HPのスケルトン">
<AREA shape="circle" coords="412,289,67" href="http://fujigopc.com/osusume/" alt="標準デザイン・パターン集" title="標準デザイン・パターン集">
<AREA shape="rect" coords="40,368,474,431" href="http://fujigopc.com/pdesign/" alt="プレミアム・デザイン・テンプレート" title="プレミアム・デザイン・テンプレート">
</MAP> 
}}
#clear

解説します<操作手順>

  1. エクセルで画像を作成する(図形ができればエクセルでなくても良い)
    1. エクセルの図形挿入で四角形や円、台形や菱形などの図形を作成する
    2. 各図形の中にテキスト挿入でリンク先の文言を入力します
    3. 全ての図形を囲って一つの図形にして画像データとして保存する
  2. 作成された画像を HAIK の SWFU でサーバーにアップロードする
  3. 作成された画像データをペイントで開く
    1. 画像内の個々の画像の座標値(ピクセル)を求めてメモに取る
  4. 画像を設定するページを開いて画像挿入の HTML タグを作成する
    1. HTML タグ内の各画像の座標値(ピクセル)を設定する


AREA パラメータの設定について

前記のおまじないには、図形の数だけ AREA パラメータが設定されています。
一例として、一つの図形の AREA パラメータについて解説します。

<AREA shape="rect" coords="43,28,476,87" href="http://fujigowp.info/" alt="藤心パソコン倶楽部" title="藤心パソコン倶楽部">
  • shape="rect" で図形の形を指定しています。この例だと四角形を意味しています。
  • coords="43,28,476,87" で図形の位置を四角形の左上と右下の2箇所をX座標とY座標で指定しています。
  • href="http://fujigowp.info/" でリンク先を指定しています。
  • alt="藤心パソコン倶楽部" で代替テキストを指定しています。
  • title="藤心パソコン倶楽部" でオンマウスのタイトルを指定しています。


画像の座標の求め方

画像の座標

画像をアクセサリーのペイントで開きます。
キャンバス上でカーソルを移動すると画面左下に2ツの数値が表示されていると思います。
それがカーソル位置のXY座標(ピクセル)です。


円の中心の座標と半径の求め方

円の中心の座標と半径

左図で説明します。
画像の左上隅の座標を(0 , 0)とします。
円の中心のX座標 a は、(X1 + X2)/2 で求められます。
円の中心のY座標 b は、(Y1 + Y2)/2 で求められます。
円の半径 c は、(X2 - X1)/2 または(Y2 - Y1)/2 で求められます。

[check]楕円形だったらどうする?
円の座標は正円でなければ求められません。
それでは、楕円のような場合は、その楕円に近い多角形を想定して、その多角形の頂点の座標を求めれば解決します。あまり多い頂点を設定すると後が大変ですので正確に設定する必要はありません。程度問題と割りきっておおよその精神でいいと思います。


地図以外にイメージマップを利用した例

画像の説明

イメージマップは、商用ページだけでなく一般のページでも利用範囲は広くあります。HPのいろいろな場面でいろいろな利用方法を模索していきたいと筆者を思っています。
イメージマップという機能があることが認識しているからこそ、その先が予測できるのであって、知らなければそれで終わり。損した気分にもなりかねません。
地図以外にイメージマップを利用した応用例を紹介します。
イメージマップでリンクボタンもどきを設置する


もう一つのイメージマップの例

下記の画像の上の何処かをクリックしてみて下さい。
画像のイメージに対応した自前サイトにリンクする筈なのですが、不具合が発生しております。意図したリンク先にリンクされておりません。いろいろ調べた結果、原因が分かりました。同一ページに複数のイメージマップを設置できないという単純なる理由でした。
従って、別ページ「もう一つのイメージマップ」で動作を検証してみて下さい。

藤心パソコン倶楽部 藤心QHMクラブ 藤心DOUGAドットコム Photo Flash Maker 藤心 My Jukebox


  • 動作検証はコチラのページです。



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 3  
    役に立たなかった 0  


ご意見箱