DreamWeaver/タブスタイルのメニューバーを作りたい（ロールオーバー・スワップ）

解決済

質問者：macdotcat
質問日時：2006/05/31 11:17
回答数：2件

よろしくお願いします。（mac OS10.3.9）

ドリームウィーバーでタブのような外観をもったメニューを作りたいと思って試行錯誤しています。

1　　2　　3と並んだメニューボタン画像がロールオーバーで変化して、そのメニューボタンの下にサブメニューが現れて、リンクできるというイメージです。

例えば、「music」というラベルの赤いボタンにマウスを当てると「music」赤ボタンが「music」緑ボタンに変わってその下段に緑の長方形の列ができて、「ジャズ」「クラッシック」など他ページへのリンク（Mapを使って？）ができるような感じです。
緑ボタンと下段がつながってみえてタブっぽいイメージで。

DWでロールオーバーとスワップイメージを使って、「music」緑ボタンにして、下段に緑長方形を表示するところまでは何とかいけたのですが、ハテ、この長方形にリンク先をつけたいのだがどうしたらいいのだろうと途方にくれてしまいました。

検索はしてみたのですが、ぴったり同じような制作方法手順などが見つかりませんでした。

お分かりになる方、手順を教えていただけませんか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： torayoshi
回答日時：2006/06/02 19:00

一度投稿したんですが、利用規約違反で削除されてしまいました ^^;

もう一度投稿します。

まず、どのようにしたいのか確認させてください。
ロールオーバーで画像を入れ替えて、入れ替わった画像にイメージマップを埋め込み、
リンクを貼って別ページへ飛ばす。で、良いんですね？
入れ替わった画像にイメージマップのリンクを貼る場合は、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では確認していません。
それがちょっと心配ですが…

参考URL：http://www16.plala.or.jp/zaq_501/test.html

- 0
- 件

通報する

この回答へのお礼

再度の投稿ありがとうございました！
参考にして作ってみます(^_^)

通報する

お礼日時：2006/06/05 09:43

No.1

回答者： fab76
回答日時：2006/06/01 00:02

おそらく"ポップアップメニュー"のようなことを実現したいのだと思いましたが…

ポップアップメニューの例
http://www.adobe.com/support/dreamweaver/program …

【Macromedia Dreamweaver MX で Macromedia Fireworks MX ポップアップメニューの作業をする】
http://www.adobe.com/jp/support/dreamweaver/prog …

このページのナビゲーションなど非常に近いものではないですか？ソースコードをDreamweaverで読み込んで検証してみるといいと思いますよ。

ページ内ではFireworksと連携させた製作例になっていますがMX以降、Dreamweaver単体で作成出来るようになっています。
ビヘイビアパネルの【ポップアップメニューを表示】で表示されるエディタ上でリンク先の設定をします。

この回答への補足

補足日時：2006/06/02 10:04

通報する

- 0
- 件

通報する

この回答へのお礼

こんにちわ、ありがとうございます！
私のイメージしているのは↓こんな感じです
（一番上の会社案内などのメニュー部分です）
http://www.focal.co.jp/index.html

ただ、こちらのサイトではflashが使用されていて、参考にならなかったのです。

私が自力で（ロールオーバーとスワップイメージを使って）できたのは例に挙げたURLでたとえれば、会社案内にポイントして、下にグレー背景のサブメニューが出るところまでできた、というところなのですが、そのサブメニューにリンクをつける場合、どう設定すればいいのだろうか、という質問なのです。

どうぞ宜しくお願いします！

通報する

お礼日時：2006/06/01 09:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！