クリッカブルマップの定義で、指定した領域を確認したい。

この度初めてHPの定義で、クリッカブルマップなるものを利用してみました。
現在設定中なのですが、ここで思うことが…。

背景の画像とその上に指定されるリンクの形を座標で指定するようなのですが、これってどこが指定した領域なのか分らないのですが、リンク箇所に色をつけたりして、背景画像との指定場所の確認は出来ないものなのでしょうか？
CSSでMAPのareaやリンクに背景を指定してみたのですが、色は付かないようです…。

簡単な形ならよいのですが、複雑な場合とても難しいように難じるのですが…。

クリッカブルマップの定義にお詳しい方いらっしゃいましたら、実際どのように作業なさるのか聞かせていただけないでしょうか。
宜しくおねがいします！

No.2 ベストアンサー 回答者： torayoshi 回答日時： 2015/06/10 13:00

#1です。

曲線を含む複雑な不定多角形のイメージマップを手動で入力してる人なんて、まずいないと思います。
必ずなんらかのツールを使ってるはず。
質問者さんも言ってるように、それこそ気の遠くなるような作業で、あまりにも非現実的ですからね。

リンク範囲を色分けするにはJavaScriptによるロールオーバーなども公開されてますね。
http://www.webcreator-net.com/tips_memo/javascri …
上記は手動入力なので複雑な形には不向きですが。

この回答へのお礼

何度も有難う御座います！
複雑な定義にはツールを利用してみたいと思います。

また、今回教えていただきましたJavaScriptの方法、こちら早速試してみたいと思います。
この方法であれば、確認しやすいですね。有難う御座いました！！

お礼日時：2015/06/10 16:05

No.1 回答者： torayoshi 回答日時： 2015/06/09 20:05

たしかに分かりづらいですね。

リンク指定領域を視覚的に確認しながら設定するには自動設定ツール類を使うと良いと思います。

私はGIMP2のイメージマップ自動作成ツールを使ってます。
これならどんな複雑な形でも視覚的に作れます。
指定領域を後から確認するのではなく、指定したい領域をマウスでなぞる方式なので確実です。

一例として東京都の白地図で新宿区をリンク指定領域にしてみました。
ツールでは赤い破線で囲まれた表示になります。
ちなみにこのmapタグは、
<map name="map">
<area shape="poly"
coords="589,380,591,382,593,384,594,386,596,386,598,387,599,387,601,388,603,388,604,388,606,388,609,388,609,390,611,389,611,393,611,395,613,395,615,396,617,395,617,397,620,396,622,398,624,397,626,399,627,400,628,399,630,399,632,401,633,402,635,401,638,402,639,403,640,404,642,406,641,408,639,411,638,413,638,415,636,415,635,418,634,419,634,420,632,420,630,422,629,423,628,424,628,427,626,426,624,427,622,429,621,430,620,432,619,433,618,435,618,431,617,429,615,428,615,426,613,425,611,424,611,422,609,422,609,420,607,420,605,421,605,423,603,423,602,424,600,425,599,425,598,426,597,426,596,425,595,423,594,422,593,420,592,419,594,417,594,415,594,412,595,411,595,408,595,407,596,406,597,404,598,402,600,401,600,399,598,399,596,399,592,400,592,398,590,397,589,395,588,393,587,391,587,389,587,387,588,386,588,385,588,383,589,382,589,381" href="#">
</map>

この回答へのお礼

有難う御座います。
自動設定ツールですか、検討してみたいと思いますが、出来れば手入力で視覚的に確認できる方法があると良いのですが…。

ただ、掲載いただいたような複雑な指定だと気の遠くなる作業になってしまいますね…。

お礼日時：2015/06/10 09:13