画像にロールオーバーするとメニューが出てくる

質問

画像にロールオーバーするとプルダウンメニューが出てくるものを作りたいと思っています。
さらに、画像に対してのメニューの位置も色々に設定したい(画像の上、下、左、右など)のですが、可能でしょうか。
可能であればどのように作ればよいのか教えていただきたいです。
よろしくお願いいたします。

回答No.1

0011Allen · ベストアンサー

Dreamweaverを使ってのチュートリアルがマクロメディアにありますよ。
もし、「どのように・・」ってこれから勉強したいなら、試してみるといいかも。
Dreamweaverのトライアルバージョンもダウロードできるし・・。

もし「JavaScriptを」ということなら、www.javascript.com とかにサンプルがあると思うけど。

参考URL：

http://www.macromedia.com/jp/support/dreamweaver/programs/fw_dw_popup/

お礼

ご回答ありがとうございます。
Fireworksを使って簡単にできるんですね！勉強になりました。
そこでもう1つご質問させていただきたいのですがよろしいでしょうか。
今、以下のような方法で作成しているのですが、メニュー部分のアルファ値を設定することはできないのでしょうか。
前試した方法で、設定できるものがあったので…（でもそれはメニューの位置が変えられないのでダメでした）
前試したのは外部jsファイルを読み込んで、htmlで ["PanelOpacity", 85]と書くと透明度が85％になるというものです。
もし今回の場合にもできるようであれば、方法を教えていただけると嬉しいです。
よろしくお願いします。

▼head内
<script language="JavaScript">
<!--
function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0 = new Menu("root",300,16,"MS UI Gothic, Osaka",10,"#3B5364","#D18A00","#C2CCD0","#F1F3F3");
fw_menu_0.addMenuItem("aaaaa","window.open('aaaaa.html', '_top');");
fw_menu_0.addMenuItem("bbbbb","window.open('bbbbb.html', '_top');");
fw_menu_0.bgImageUp="../img/a.gif";
fw_menu_0.bgImageOver="#FFFFFF";
fw_menu_0.hideOnMouseOut=true;
　　　　　：
　　　　　：
fw_menu_8.writeMenus();
}

//-->
</script>
<script language="JavaScript1.2" src="fw_menu.js"></script>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>

▼body内
<script language="JavaScript1.2">
fwLoadMenus();
</script>
<img src="../img/b.gif" width="681" height="439" usemap="#Map" border="0"><map name="Map">
<area shape="circle" coords="41,40,36" href="#" target="_top" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,60,110);"></map>

回答No.3

noname#5841

こんにちは。
＞メニュー部分のアルファ値を設定することはできないのでしょうか。
できますーーー。
でも、めんどくさいですーーーー。
めんどくさい、というのは、ブラウザの振り分けしてくれてるので、それごとに指定しなくちゃいけないため・・・・（親切なんですけどね、カスタマイズするとしたら、自分で書いてないので探すのが一手間、というイミです）。

IEダケでよろしければ、
fw_menu.jsの中に、

window.ActiveMenu = l;
var s = l.style;
s.visibility = "inherit";

という記述を見つけて下さい。
で、ここを
window.ActiveMenu = l;
var s = l.style;
l.style.filter = "progid:DXImageTransform.Microsoft.Fade(0.5)";
l.filters[0].apply();
s.visibility = "inherit";
l.filters[0].Play();

みたいな感じで、フィルタ効果設定します。

＞htmlで ["PanelOpacity", 85]と書くと

が、どういう仕組みなのか、ちょっとわからないんで、フィルタに関しては以下御参照ください。
上のだとちょっと特殊なパターンで、フェードインして現れます。
（一律同じアルファ値で、特に動作はないのかな）

参考URL：

http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/content/filters/reference2.htm#Visual_Filter_Effects

お礼

ご回答ありがとうございます。
半透明できました！

var s = l.style;
l.style.filter = "alpha(opacity=85)";
l.filters[0].apply();
s.visibility = "inherit";
l.filters[0].Play();

↑
こんな感じで、使わせていただきました。
とても助かりました。
ありがとうございました。

回答No.2

0011Allen

#1のAllenです。

Dreamweaverというより、Fireworksでしたね。(^^;　ゴメン

透明度を85％にするのはHTMLに入れるのしか知らないのですが・・。(^^;
それだと土台になるメニューにだけしか適用されないんですよね。

Fireworks+Dreamweaverの場合には、Fireworks上でグラフィックスその物の透明度を変えた方が便利だったりして。

お礼

ありがとうございます。
Fireworksで透明度の設定をしようといろいろやってみたのですが、
うまくいきません、、、
例えば画像Aにロールオーバー→プルダウンメニュー（メニュー部分の背景に画像Bを使用）表示というとき、プルダウンメニューの下にテキストなどがある場合メニューが透過しているイメージにしたいのです。
ちょっとここのカテゴリとずれてしまうのですが、よろしくお願いします。