919809

モックン☆彡の部屋

画像でリンク（高）

画像でリンク（高）

今回使うタグ
< IMG src="画像アドレス" usemap="#名前" > 、
< MAP name="名前" ></ MAP > 、
< AREA href="リンク先アドレス" shape="型" coords="座標" >

指定した範囲にリンクを張る「クリッカブルマップ」と言われているものです。

指定できる範囲の形は、「四角形」「円形」「多角形」の３種類があます。

では、実際に例を見ましょう。

《例題１》

< IMG src="画像のアドレス" usemap=" #map " alt="クリッカブルマップ" width="300" height="200" border="0" >
< MAP name=" map " >
< AREA shape ="CIRCLE" coords ="35,27,6" href="リンク先アドレス" >
< AREA shape ="CIRCLE" coords ="63,127,50" href="リンク先アドレス" >
< AREA shape ="RECT" coords ="169,27,264,75" href="リンク先アドレス" >
< AREA shape ="POLYGON" coords ="158,132,193,98,260,134,239,175,181,175" href="リンク先アドレス" >
< /MAP >

結果

先に全体的な流れを書くと、図形を表示してからその後にリンクを張る領域を指定します。

まずは上のような画像を用意し、それぞれの図形の座標を調べます。

画像を表示しているタグの『 alt 』はマウスを画像の上に乗せたときのポップアップ表示。

『 width 』、『 height 』は画像の横幅・縦幅、『 border="0" 』は画像を囲む枠の太さを表します。

詳しくは、画像を表示する、画像でリンク（低）のページを参考にして下さい。

『 usemap=" #map " 』の名前『 map 』は適当な名前（英文字）をつけて、

同じ名前を３行目の『 name="" 』に入れます。

これは、１ページにいくつもクリッカブルマップがある場合に、

領域指定したタグがどれに対応しているのか分かるようにするためです。

画像タグで使用する名前の前には必ず『 # 』を付けて下さい。

続いて『 shape ="" 』ですが、これには３タイプあります。

そして、それぞれにリンクの座標を『 coords ="" 』で指定します。

図形をみてもらえば分かると思いますが、下のようになります。

領域の形状指定

領域の座標指定

shape ="CIRCLE"

･･･

円形

円の中心点（座標 X,Y），円の半径

shape ="RECT"

･･･

四角形

四角形の左上（座標 X1,Y1），右下（座標 X2,Y2）

shape ="POLYGON"

･･･

多角形

多角形の各頂点（座標 X1,Y1，X2,Y2，X3,Y3，・・・）

座標指定の方法が少しなれないとやっかいかもしれませんが、X座標・Y座標の順で

時計回りに半角の『 , 』（カンマ）を使って続けて書いていきます。

X、Yの座標は画像の左上を（0,0）として、横の距離をX,縦の距離をYとします。

今回紹介したクリッカブルマップは、自分で図形を作って座標を指定しますが

少し難しいかもしれません (ﾟДﾟ;)

座標の入力などややこしいので、簡単に作成できるフリーソフトも出ている程です。

ここでは紹介しませんが、興味のある方は「クリッカブルマップ」と

「フリーソフト」などで検索してみてはいかがでしょうか？

使えるようになると左上のメニューのような事もできます。

このメニューはオイラが通常使っていないメニューです。ページごとに変えても面白いかも！？

ちなみに右上のメニューは、画面をキャプチャー（コピー）して

必要な部分（メニュー項目）だけ切り取ったので、真似をするなら少し面倒かも。

豆知識

２つの図形が重なっている場合で、それぞれの図形でリンク先を変えるには

内側のものから指定しましょう。

例：長方形の中に円の図形が入っている場合

< IMG src="画像のアドレス" usemap=" #map1 " ･･･ >
< MAP name=" map1 " >
< AREA shape ="CIRCLE" ･･･ >
< AREA shape ="RECT" ･･･ >
< /MAP >

画像でリンク（低）へ

ジャンル別一覧