- ベストアンサー
DreamWeaver8 のイメージマップでロールオーバー?
DreamWeaverについて方法がわからないのでおしえてください。 県別で境界線のある日本地図の画像(色はグレーで県の境界線は白)の それぞれの県にカーソルを乗せると、その県の色がグレーから赤に変わるようにしたいのですが、できますか? ホットスポットで県別にリンクを貼る方法はわかるのですが、 色を変えることはできるのでしょうか? OSはWindows Vista 使用ソフトは DreamWeaver8です。 独学でなんとか使える程度でJava、CGIなどはよくわかっていません。 よろしくお願いします。
- urakibi
- お礼率48% (79/164)
- ホームページ作成ソフト
- 回答数3
- ありがとう数0
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
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の数字を1つ1つ入力することになると思います。 画像を作るときにどの位置にどの都道府県があるかをメモしておいて、 それを見ながら作るのが良さそうですね。 スタイルシートだけでできる、というメリットは大きいと思います。 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
その他の回答 (2)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
ホットスポットで画像の一部分だけを変更することはできません。 レイヤーを重ねて、表示・非表示を切り替えることで、 画像の一部だけが変わる様に見せかけることはできますが、結構面倒です。 DreamweaverでANo.1と同じものを作る方法です。 ・リストを使ってあらかじめ都道府県ごとに分割した画像を挿入していきます。 ・リストそれぞれをレイヤー化して、表示位置を調整します。 ・スワップイメージを設定します。 DWのレイヤー挿入では、<li>ではなく<div>を使用しますが、 スタイルシートが使えない環境で表示したときのアクセシビリティーの問題だけです。 吹き出しのはそれ用のJavaScriptライブラリですので、 それを使わなければ吹き出しは出ません。 JavaScriptライブラリの使い方を調べて、そっちを使っても良い様な気がします。 スワップの設定とか面倒臭い(´・ω・`)
- 参考URL:
- http://pv.wi-wi.jp/chizu/
補足
なかなか難しそうですね。 回答いただいた中でわからない言葉があり 調べながらやっていきたいと思いますが 今回は時間の制限があり、色を変えるのはあきらめることに しました。 もっと勉強してから、作りかえたいと思います。 詳しい回答ありがとうございました。
- sikiminomo
- ベストアンサー率45% (16/35)
仕組みは分かっていませんが、こんな事でしょうか? ↓↓↓
補足
こんな感じです!ただ吹き出し?みたいに出てこなくてもいいです。よろしくお願いします。
関連するQ&A
- クリッカブルマップからリモートロールオーバー
使用しているソフトは、GoLive6.0、OSはWINDOWSです。 一枚の大き目の画像にクリッカブルマップを設定しまし た。そのホットスポットに別ファイルへのリンクを貼り ました。このホットスポットにカーソルが乗った時点で 離れたところにある画像の表示をリモートロールオーバ ーで変化させたいのです。また、その離れたところにあ る画像自体もその画像にカーソルが乗るとホットスポッ トにカーソルが乗った時と同様に画像を切り替えて、ク リックすれば別ファイルへ飛ぶリンク設定をしたいと思 っています。このようなことはGoLive6.0では可能でし ょうか。 もし可能であれば、方法をお教えいただければ幸いです。 また方法を解説しているサイトなどがあればお教えくだ さい。どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ロールオーバーはどちらがよい?
カーソルを画像に置いたとき変化をさせるロールオーバーにはいろいろありますが ・CSSで画像を読み込ませる方法 ・DreamweaverなどのロールオーバーイメージのJAVAスクリプトでやる方法 とありますがどちらがよいのでしょうか?各々のメリット、デメリットをご教授願います。私としてはできるだけ軽いHPにしたいと思っておりますので負荷の少ない方法を優先させたいです。
- ベストアンサー
- CSS
- ロールオーバーについて
カーソルを画像に置いたとき変化をさせるロールオーバーにはいろいろありますが ・CSSで画像を読み込ませる方法 ・DreamweaverなどのロールオーバーイメージのJAVAスクリプトでやる方法 とありますがどちらがよいのでしょうか?各々のメリット、デメリットをご教授願います。私としてはできるだけ軽いHPにしたいと思っておりますので負荷の少ない方法を優先させたいです。
- 締切済み
- レンタルサーバ・ASP
- dreamweaverで画像にテキストを…
質問します。 dreamweaverで挿入した画像にテキストを直接打ち込む方法はありませんか? ホットスポットじゃなくて、 ちゃんとテキストにリンクを貼りたいんです。 ビルダーでは画像の上からテキストが打てたと思うのですが・・・。 ファイヤーワークスで作成した画像をdreamweaverに挿入した後の作業です。 宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- googleマップ 地図色の部分的違いは何を示すか
googleマップを地図表示で観た時、地図のバックグランド色が、地図の部分部分によって、違うことが、わかると思います。 試しに、千葉県のこの地図↓に、アクセスしてみて下さい。 https://www.google.co.jp/maps/@35.7118795,140.7704304,15z?hl=ja 地図中央の「親田町」と書かれた所は、地図のバックグランド色が「グレー」であることがわかります。 少し右上の「常世田町」と書かれた所は、地図のバックグランド色が「薄黄緑」であることがわかります。 このように、googleマップは、部分部分によって色が違います。 今回お聞きしたいのは、色の違いは何を意味しているのかという事です。 おわかりになるかた、どうか教えて下さい。
- 締切済み
- Googleサービス全般
- Dreamweaverでリンクさせると文字の色が変わってしまう
題名の通りなんですけど、Dreamweaver(MX)で文字にリンクさせると元々も文字の色が変わってしまいます。(例:赤の文字にリンク→紫に!?) 下の方のカラーパレットにもちゃんと赤が出ているし、HTMLの方も確認したのですがちゃんと赤になっています。 なのにプレビューするとなぜか紫に・・。 どなたかなおす方法をご存知の方、教えてください。お願いします。
- ベストアンサー
- その他(ソフトウェア)
- 『Dreamweaver2』でのロールオーバーイメージ
ロールオーバーイメージについて質問です。 元のイメージに、マウスをonするとロールオーバーイメージになり、 outすると元のイメージに戻るんですが、 リンク先に行き、ブラウザの『戻る』ボタンで戻ってくると(onしていないのに)ロールオーバーイメージで表示されてしまいます。 これはどうしようもない事なのでしょうか? ターゲットを_blankにすると問題は解決するようなのですが、他の解決方法はありませんでしょうか? よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- Dreamweaverでimageのロールオーバー
Dreamweaverを使ってimageボタンのロールオーバーを指定すると <head>内に記述されるjavascriptのほか、<body>タグの中にも以下のタグが記述されます。 <body onLoad="MM_preloadImages('menu1_over.gif','menu2_over.gif')"> ()内のgif名はボタンがover時の画像名ですが、ロールオーバーするボタンが膨大だと <body>タグ内も膨大なソース量になってしまいます。 試しに削除してみたところIEでは正常にロールオーバーが動作します。 上記の記述は何を意味しているのでしょうか。 不足な情報があれば補足させていただきますので、お知恵をお貸し下さい。
- 締切済み
- ホームページ作成ソフト
- Dream Weaver ホットスポットの枠について
DreamWeaver4を使っています。 jpeg画像にホットスポットを作ったのですが、その場所をクリックした場合にホットスポットの枠が点線で表示されます。 この点線の表示をさせない方法はあるのでしょうか? 詳しい方いらしたらお教えください。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- グーグルマップの赤色の枠線
自身の地域付近に、いつも「赤色の囲み線」が表示された まま消えません。グーグルマップを開くたび、その線は 何か月も表示されたままです。 どんな赤線かというと、地図上の地域名表示をクリックした とき、その地域を囲むように表示される赤線と同じです。 この線の場合には、地図上の別の場所をクリックすると すぐに消えます。 しかし、「赤色の囲み線」はいつまでの消えずに残った ままです。なぜ、消えないのでしょうか? 消し方があれば教えてください。 よろしくお願いいたします。
- ベストアンサー
- Googleサービス全般
補足
スタイルシートだけでできるということなんですが どうも私の知識では、難しそうです(;;) 今回は色を変えるのはあきらめて ふつうのイメージマップとしてだけ使用することにしました。 せっかく丁寧におしえて頂いたのに申し訳ありません。 今後も勉強していきたいと思います。 回答ほんとうにありがとうございました。