- ベストアンサー
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でたとえれば、会社案内にポイントして、下にグレー背景のサブメニューが出るところまでできた、というところなのですが、そのサブメニューにリンクをつける場合、どう設定すればいいのだろうか、という質問なのです。 どうぞ宜しくお願いします！
補足
お礼
再度の投稿ありがとうございました！ 参考にして作ってみます(^_^)