- ベストアンサー
DreamWeaver/タブスタイルのメニューバーを作りたい（ロールオーバー・スワップ）
よろしくお願いします。（mac OS10.3.9） ドリームウィーバーでタブのような外観をもったメニューを作りたいと思って試行錯誤しています。 1 2 3と並んだメニューボタン画像がロールオーバーで変化して、そのメニューボタンの下にサブメニューが現れて、リンクできるというイメージです。 例えば、「music」というラベルの赤いボタンにマウスを当てると「music」赤ボタンが「music」緑ボタンに変わってその下段に緑の長方形の列ができて、「ジャズ」「クラッシック」など他ページへのリンク（Mapを使って？）ができるような感じです。 緑ボタンと下段がつながってみえてタブっぽいイメージで。 DWでロールオーバーとスワップイメージを使って、「music」緑ボタンにして、下段に緑長方形を表示するところまでは何とかいけたのですが、ハテ、この長方形にリンク先をつけたいのだがどうしたらいいのだろうと途方にくれてしまいました。 検索はしてみたのですが、ぴったり同じような制作方法手順などが見つかりませんでした。 お分かりになる方、手順を教えていただけませんか？
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
一度投稿したんですが、利用規約違反で削除されてしまいました ^^; もう一度投稿します。 まず、どのようにしたいのか確認させてください。 ロールオーバーで画像を入れ替えて、入れ替わった画像にイメージマップを埋め込み、 リンクを貼って別ページへ飛ばす。で、良いんですね？ 入れ替わった画像にイメージマップのリンクを貼る場合は、img要素にusemap属性を与え、 usemap属性の属性値はmap要素のname属性に与えます。 ↓雛形を作りました。 <html> <head> <title>プルダウンメニュー</title> </head> <body> <img src="（元の画像）" onmouseover="this.src='（入れ替わる画像）'" onmouseout="this.src='（元の画像）'" usemap="#map_1" border="0"> <map id="map_1" name="map_1"> <area shape="rect" alt="" coords="*,*,*,*" href="aaa.html" title="aaa" /> <area shape="rect" alt="" coords="*,*,*,*" href="bbb.html" title="bbb" /> <area shape="rect" alt="" coords="*,*,*,*" href="ccc.html" title="ccc" /> </map> </body> </html> イメージマップの作り方は分かりますね？ これで行けるはずです。 スワップイメージではタブのようなリンクは貼れません。 ロールオーバー+イメージマップの組み合わせでないとうまく行きません。 ただ、動作確認はwin XP IE6.0のみなので、MACでは確認していません。 それがちょっと心配ですが…
その他の回答 (1)
- fab76
- ベストアンサー率59% (327/548)
おそらく"ポップアップメニュー"のようなことを実現したいのだと思いましたが… ポップアップメニューの例 http://www.adobe.com/support/dreamweaver/programs/fw_dw_popup/sample/popup_complete.htm 【Macromedia Dreamweaver MX で Macromedia Fireworks MX ポップアップメニューの作業をする】 http://www.adobe.com/jp/support/dreamweaver/programs/fw_dw_popup/index.html このページのナビゲーションなど非常に近いものではないですか？ ソースコードをDreamweaverで読み込んで検証してみるといいと思いますよ。 ページ内ではFireworksと連携させた製作例になっていますがMX以降、Dreamweaver単体で作成出来るようになっています。 ビヘイビアパネルの【ポップアップメニューを表示】で表示されるエディタ上でリンク先の設定をします。
お礼
こんにちわ、ありがとうございます！ 私のイメージしているのは↓こんな感じです （一番上の会社案内などのメニュー部分です） http://www.focal.co.jp/index.html ただ、こちらのサイトではflashが使用されていて、参考にならなかったのです。 私が自力で（ロールオーバーとスワップイメージを使って）できたのは例に挙げたURLでたとえれば、会社案内にポイントして、下にグレー背景のサブメニューが出るところまでできた、というところなのですが、そのサブメニューにリンクをつける場合、どう設定すればいいのだろうか、という質問なのです。 どうぞ宜しくお願いします！
補足
関連するQ&A
- ビヘイビアでポップアップメニュー&ロールオーバーする方法
みなさま，おはようございます。 Dreamweaver8(Mac)にてホームページ作成の勉強中です。 (明日で修了ですが，まだまだラストスパート中！) ビヘイビアでポップアップメニューとロールオーバーをやってみましたが作動しません。 ちなみに，フレームに作ったメニューボタンにつけたいのです。 1.ポップアップメニューについて 解説本のとおりの手順でやってみました。 表示位置を変えたりしてみましたが，動かないことに変わりはありませんでした。 [ビヘイビア]パネルには，表示されてます。 先生に見てもらいましたが，手順に間違いは無いようだ・・・との事。 2.ロールオーバーについて こちらは，ふたつのやり方でやってみましたが， やはり動きません。 ひとつめは，↓ [挿入]→[イメージオブジェクト]→[ロールオーバーイメージ]から ふたつめは，↓ [ビヘイビア]→[スワップイメージ]から 出来れば，今日17:00位までに原因究明してHPを完成できたら・・・と思っています。 時間がありませんが，よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 『Dreamweaver2』でのロールオーバーイメージ
ロールオーバーイメージについて質問です。 元のイメージに、マウスをonするとロールオーバーイメージになり、 outすると元のイメージに戻るんですが、 リンク先に行き、ブラウザの『戻る』ボタンで戻ってくると（onしていないのに）ロールオーバーイメージで表示されてしまいます。 これはどうしようもない事なのでしょうか？ ターゲットを_blankにすると問題は解決するようなのですが、他の解決方法はありませんでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- DWで作成したロールオーバーイメージがサイトで見ると表示されません？？
ご覧くださって有難うございます。 ドリームウィーバーのロールオーバーイメージを使ってボタンを製作したのですが、 ブラウザーチェックで見た時には問題なかったのに、サイトをＵＰしてみたらロールオーバーイメージが表示されず代替テキストのみが表示されてしまいました。 ご指導のほど宜しくお願い致します。。。
- ベストアンサー
- ホームページ作成ソフト
- ロールオーバーについて
お世話になります。ドリームウィーバーでスワップイメージの設定をすると function MM_findObj(n, d) { //v4.01 以下省略 というスクリプトを書き出してくれます。 そのスクリプトの意味がわかりません… 何をやってくれているのでしょうか。それがないと、マウスオーバーした時にイメージが変わらないのですが、知っている方いましたら、詳しく教えていただきたいです。 すみませんが、よろしくお願いします！
- ベストアンサー
- JavaScript
- Dreamweaverでimageのロールオーバー
Dreamweaverを使ってimageボタンのロールオーバーを指定すると <head>内に記述されるjavascriptのほか、<body>タグの中にも以下のタグが記述されます。 <body onLoad="MM_preloadImages('menu1_over.gif','menu2_over.gif')"> ()内のgif名はボタンがover時の画像名ですが、ロールオーバーするボタンが膨大だと <body>タグ内も膨大なソース量になってしまいます。 試しに削除してみたところIEでは正常にロールオーバーが動作します。 上記の記述は何を意味しているのでしょうか。 不足な情報があれば補足させていただきますので、お知恵をお貸し下さい。
- 締切済み
- ホームページ作成ソフト
- スワップイメージが出来ないのでしょうか？
IllustratorCSでホームページに使うメニューなどの画像を作成していますが、スライスツールのCSS出力を使用しているのですが、その後ホームページ作成ソフトでスワップイメージを作ろうとするのですがうまく出来ません。 CSSで出力した画像などには、スワップイメージ（ロールオーバー）などは適用できないのでしょうか？ 経験のある方ご指導をお願いいたします。
- ベストアンサー
- グラフィックソフト
- スワップイメージで画像ではなくhtmlファイルを表示させたい
わからないので教えてください。 ドリームウィーバーでページを作っています。 スワップイメージの設定をすると、マウスをアイコンの上においたら、別の箇所のイメージ画像が変わりますよね。 イメージ画像ではなくて、htmlファイルを変更させたいのですが、できますか？ インラインフレームでできるかなと思ったのですが、どう設定すればいいかわからなくて困っています。 よろしくお願いします。 リンダ
- ベストアンサー
- JavaScript
- on Mouse後の画像にマップをはることが出来ますか？
on Mouseしたときの画像にマップをつかったリンクをはることはできますか。 JacaScriptでのソースをおしえてもらえませんでしょうか。 ドリームウィーバーのビヘビイアのスワップイメージでの ソースをもとにできると有りがたいです。 よろしくお願いします。
- 締切済み
- HTML
- MovableTypeでロールオーバー保持
現在、MovableTypeでグローバルメニューのモジュールを作成しております。 普通にロールオーバーはできるのですが、リンク先のページに遷移された時のボタンのロールオーバー保持ができません。 javascriptの使用は、したくないです。 MTのタグ＋CSSでどうにかならないでしょうか。 MT4.2を使用しております。
- 締切済み
- ブログ
- ビルダー９でロールオーバー作成
現在ビルダー９でロールオーバーのリンクボタンを作っています。ウェブアートデザイナーを開いてウェブアート素材タブのなかから画像を選びましたが、オブジェクトの選択で、画像だけ（あるいは文字だけ）が選択されてしまい、ロールオーバーが作れません。 説明わかりづらいですか？つまり、画像のみ（文字のみ）のロールオーバーになってしまうということです。画像＋文字を選択するにはどうしたらいいですか？
- ベストアンサー
- ホームページ作成ソフト
お礼
再度の投稿ありがとうございました！ 参考にして作ってみます(^_^)