|
|
クリッカブルマップ
▼地図・画像上での位置を指定してリンクしてみよう。
- リンクでも一部ちらっと出てきたクリッカブルマップの説明です。
◆指定の仕方
①まず、画像を１枚用意します。
②貼り付けるタグは<IMG src="画像ＵＲＬ" usemap="#★">で指定。
※★は適当な名前をつける。（map1とかでいいです。前に#を忘れずに。）
③次に<MAP name="★">を記述する。（★は上でつけた名前）
④次は<AREA shape="ｎ" coords="ｘ"
href="ｙ">という記述をする。
※ｎ＝circle（円）、rect（四角形）、poly（多角形）のどれかを指定。
※ｙ＝ジャンプするページのＵＲＬを指定。
●ｘ＝座標点を指定する。（ここが一番肝心です）
「circle」の時は、coords="100,100,30"の形で指定します。１番目の数字は円の中心座標の横（画像の左端からの距離）、次の数字が中心座標の縦（画像の上端からの距離）、最後の数字が円の半径を指定しています。
「rect」の時は、coords="100,30,150,80"の形で指定します。最初の数字と二番目の数字が四角形の左上角の座標点の指定で、横縦の順番で記述しています。
三番目と四番目の数字が四角形の右下角の座標点で、やはり同様に横縦の順番で記述されています。
例からいくと、この四角形は縦横５０ピクセルの正方形になるはずです。
「poly」の時は、rectの時と同様に多角形の頂点座標を順に指定します。
つまり、理屈からいくとどんな形でも、指定できるというわけです。あくまでも面倒でなければ・・・ですけど。ｗ
※一応、指定の仕方はこんなところです。では、実際にやってみましょう。
●サンプル画像（四箇所の指定をしています。）
各箇所にカーソルが乗ると、説明が出るようにしてあります。
※リンク位置は、左上、左下、右下、そして、相当凝っちゃいましたが、中央の
葉っぱはpolyでかたどってしまいました。(;^_^A
※polyで形を再現する場合、画像の座標点が表示されるようなソフトを使うこと
で簡単にできますね。（ない場合は、ちょっと苦労するかも？ｗ）
●書式サンプル
◆書式説明
xxx.jpgの部分は、任意の画像ファイル名。もちろんGIF・PNGでもOKです。
coordsの部分は、上で説明した通りで、特に付加する説明はありません。
とりあえず、当てはめてやってみてください。
▼おまけ（本物の地図の場合）(;´Д`) ﾊｱﾊｱ・・・
◆とりあえず、クリックしてみてください。（ちょっと小さかったか・・）
埼玉県と東京都にリンク張っています。（説明つきｗ）
※もう少し大きめのほうが楽でしたね(;^_^A
※実際にやる時には、大きめのを用意したほうがいいです。（教訓ｗ）
※一番の注意点は、polyの指定では座標点を時計回りに指定しなければならないということです。（これをしないとうまくできません）
※埼玉・東京のみリンクしています。（両都県ともリンクフリーということで張らせていただいています。）
|
クリッカブルマップを多用したものもたまに見かけますね。
これも使い方しだいでは、かなり面白い効果を生んでくれると思いますよ。
ぜひとも覚えておきたい一品（？）ですね。(笑) |
|
|
|
