クリッカブルマップの作り方

質問

クリッカブルマップの作り方
アメリカの州、中国の省、山手線の駅名をクリックしたら、リンク先へとぶ画像をつくりたいと考えています。

下絵の入手先をご存じでしたらお教えください。有料でかまいません。

フォトショップか、イラレか、あるいは何でつくればいいでしょうか？

作り方のサイトなどありますでしょうか？

下は一例です。
http://www.jcbus.co.jp/chinahotel/map/

回答No.2

noname#4852 · ベストアンサー

クリッカブルマップの場合、画像上の座標を調べ、以下のようなタグで
指定します。

あくまでも参考です。
　　↓

<IMG SRC="画像名.gif" USEMAP="#map" BORDER=0 WIDTH=300 HEIGHT=300>
<MAP NAME="map">
<AREA SHARE="default" HREF="../">
<AREA SHAPE="polygon" COORDS="145,60,103,78,103,93,186,93,186,78" HREF="リンク先1">
<AREA SHAPE="polygon" COORDS="150,239,189,221,189,205,107,205,107,221" HREF="リンク先2">
</MAP>

※USEMAP=#map、<MAP NAME="map">の、「map」は任意の英数文字で可。

座標の指定方法は以下のとおりです。

<AREA SHAPE="形状" COORDS="座標" HREF="アドレス">

形状と座標の指定方法は、
・circle URL x1,y1 x2,y2
　[円]位置は円の中心と円周の位置の2個所を指定します
・rect URL x1,y1 x2,y2
　[四角形]左上と右下の2個所を指定します
・polygon URL x1,y1 x2,y2 x3,y3 ... xn,yn
　[多角形]多角形の点位置を指定します。100角形までです
　polyでもOK。
・point URL x,y
　[点]特定の点を指定します
・default URL
　[その他の位置]指定された以外

で指定します。

座標は、例えばPhotoshopだったら、マップに使用する画像を開いて、
ウインドウ→ナビゲータを表示
「情報タブ」をクリックします。で、画像の上にポインターを持ってくると
情報ウインドウ内のXとYに「座標」が表示されますので、それを書きとめて
いき、先ほどのx1、y1などに記入します。

お礼

ありがとうございます。
徐々にやっていきます。

回答No.1

noname#3361

下絵を入手後の話ですが，
ご希望のようにリンク先へ飛ぶ方法はホームページビルダーのイメージマップを使えば簡単に作成できますよ。
例のURLのとおりにできます。

お礼

いずれ購入することがあれば、考えてみます。