DreamWeaver8 のイメージマップでロールオーバー？

質問

DreamWeaverについて方法がわからないのでおしえてください。

県別で境界線のある日本地図の画像（色はグレーで県の境界線は白）の
それぞれの県にカーソルを乗せると、その県の色がグレーから赤に変わるようにしたいのですが、できますか？
ホットスポットで県別にリンクを貼る方法はわかるのですが、
色を変えることはできるのでしょうか？

OSはWindows　Vista　
使用ソフトは　DreamWeaver８です。
独学でなんとか使える程度でJava、CGIなどはよくわかっていません。
よろしくお願いします。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

ANo.1のソースを見てみましたけど、
なるほど、background-positionを使ってるんですね。
JavaScriptは使ってないようです。

高さ100pxのボックスに高さ200pxの背景画像を用意し
a{
display:block;
height:100px;
width:200px;/* 内容に合わせて */
background-image:url(bg.gif);
}
a:hover{
background-position:0 -100px;
}
とすると、カーソルを重ねると背景画像が100pxずれて、
いままで表示されていなかった下半分が見える様になります。

それを応用し、縦横にいくつも区切っておく方法ですけど、
ドラッグで調整ではなく、
background-positionの数字を１つ１つ入力することになると思います。
画像を作るときにどの位置にどの都道府県があるかをメモしておいて、
それを見ながら作るのが良さそうですね。

スタイルシートだけでできる、というメリットは大きいと思います。

http://www.style-diver.com/example/css/rollover-map/css/../images/japan.gif
http://www.style-diver.com/example/css/rollover-map/images/japan_over.gif

補足

スタイルシートだけでできるということなんですが
どうも私の知識では、難しそうです（；；）

今回は色を変えるのはあきらめて
ふつうのイメージマップとしてだけ使用することにしました。

せっかく丁寧におしえて頂いたのに申し訳ありません。
今後も勉強していきたいと思います。
回答ほんとうにありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

ホットスポットで画像の一部分だけを変更することはできません。
レイヤーを重ねて、表示・非表示を切り替えることで、
画像の一部だけが変わる様に見せかけることはできますが、結構面倒です。

DreamweaverでANo.1と同じものを作る方法です。

・リストを使ってあらかじめ都道府県ごとに分割した画像を挿入していきます。
・リストそれぞれをレイヤー化して、表示位置を調整します。
・スワップイメージを設定します。

DWのレイヤー挿入では、<li>ではなく<div>を使用しますが、
スタイルシートが使えない環境で表示したときのアクセシビリティーの問題だけです。

吹き出しのはそれ用のJavaScriptライブラリですので、
それを使わなければ吹き出しは出ません。

JavaScriptライブラリの使い方を調べて、そっちを使っても良い様な気がします。
スワップの設定とか面倒臭い（´・ω・`）

参考URL：

http://pv.wi-wi.jp/chizu/

補足

なかなか難しそうですね。
回答いただいた中でわからない言葉があり
調べながらやっていきたいと思いますが
今回は時間の制限があり、色を変えるのはあきらめることに
しました。
もっと勉強してから、作りかえたいと思います。
詳しい回答ありがとうございました。

回答No.1

sikiminomo

仕組みは分かっていませんが、こんな事でしょうか？
　　　　　　　↓↓↓

参考URL：

http://www.style-diver.com/example/css/rollover-map/japan-map.html

補足

こんな感じです！ただ吹き出し？みたいに出てこなくてもいいです。よろしくお願いします。