プルダウンメニューを作りたい

質問

javascriptに関して、ほとんど知識がないのですがトップページの
メニュー部分を最近よく使われている、プルダウン形式にする様に
依頼されました。

その仕様としては、

オンマウスになったときに、隠されているメニューが表示され、なおかつ
ロールオーバーで画像がきりかわり、
マウスオーバーになったときには、また隠れる。

といったものです。いろいろと方法はあるかと思いますが、

<SCRIPT LANGUAGE="JavaScript" SRC="./common/fw_menu.js"></SCRIPT>

と、外部ファイルfw_menu.jsを読み込むようにして、fw_menu.jsに
は

function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_1 = new Menu("root",324,35,"Osaka, MS UI Gothic",12,"","","","");
fw_menu_1.addMenuItem("<A HREF='./topics/index.html' onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');' onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'><IMG NAME='pto01' SRC='./img/body-btn-pto01.gif' WIDTH='90' HEIGHT='37' BORDER='0'></A><BR>","");
fw_menu_1.hideOnMouseOut=true;
fw_menu_1.writeMenus();
} // fwLoadMenus()

と切り替わる画像とそのロールオーバーを記述しました。
結果、オンマウスした時に、指定した座標位置に画像body-btn-pto01.gifはきちんと表示されるのですが、ロールオーバーが作動しません！！

おそらく↑の記述にミスがあると思うのですが、その原因がつかめず朝に
なってしまいました。。。。　
どなたか、javascriptに詳しいかた、↑の記述の間違いを私に教えて下さい。　どうか、よろしくお願い致します。

回答No.1

noname#199778 · ベストアンサー

スクリプトの中の、シングルクォートの階層がおかしいので動作していないように思います。

fw_menu_1.addMenuItem("<A HREF='./topics/index.html' onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');' onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'><IMG NAME='pto01' SRC='./img/body-btn-pto01.gif' WIDTH='90' HEIGHT='37' BORDER='0'></A><BR>","");

この部分ですが、<a>タグの中にあるイベントハンドラ内の関数の呼び出しで、引数を示す部分にもシングルクォートを使っているので、この内容のタグが書き出されたときに、例えば「onMouseOver='changeImage('」でイベントハンドラの解釈が途切れ、正常に関数を呼び出せなくなっているように見えます。
おそらく、HTMLファイルで<a href="***.htm" onMouseOver="window.open("+++.htm","_blank");">と記述しているのと、同じ状況なのではないでしょうか。
イベントハンドラ内の関数の引数をくくる引用符だけを、「＆quot;」(＆は半角で。便宜上全角にしてあります)に置き換えて、動作するかどうか見てみてはいかがでしょう。 「＆quot;」はブラウザに解釈されると「"」に置き換えられ、ブラウザの表示上では、タグの中の引用符としても扱わせることができるはずです。

見当違いでしたら、ごめんなさい。

お礼

アドバイスありがとうございます。途方にくれていたので、ありがたいです。

さて、さっそく作業をしてみました。　私はjavascriptをよく理解していないので、せっかくのアドバイスを理解できたか不安なのですが。。。

問題の<ａ>タグの部分を訂正して、↓

<A HREF='./topics/index.html' onMouseOver=&quot;changeImage('pto01', './img/body-btn-pto01_over.gif');&quot; onMouseOut=&quot;changeImage('pto01', './img/body-btn-pto01.gif');&quot;>

としてみましたが、やはりロールオーバーは動作しませんでした。

なので、その二の訂正↓

<A HREF='./topics/index.html' onMouseOver='changeImage(&quot;pto01&quot;, &quot;./img/body-btn-pto01_over.gif&quot;);' onMouseOut='changeImage(&quot;pto01&quot;, &quot;./img/body-btn-pto01.gif&quot;);'>

としましたが、やはり動作しません。
私の訂正部分に誤りがあるのでしょうか？？

すいません、再度アドバイス頂けると幸いです。

よろしくお願いいたします。

回答No.5

noname#199778

すみません。 勘違いしていました。

ご質問のプルダウンメニューを作るスクリプトと同じと思われるものを見つけてきて、色々試してみたんですが、そのスクリプトで表示されるメニューには、HTMLは導入できますが、画像のロールオーバーは利用できないようでした。

プルダウンメニューを作るにはDHTML的に、ブラウザ上に表示されないようにスタイル指定した要素を作ってそこに画像を配置し、その要素の表示・非表示の切り替え、画像のロールオーバーの制御をJavaScriptで行う方法を取った方がいいようです。

大変失礼しました。

回答No.4

712424

すみません。 勘違いしていました。

ご質問のプルダウンメニューを作るスクリプトと同じと思われるものを見つけてきて、色々試してみたんですが、そのスクリプトで表示されるメニューには、HTMLは導入できますが、画像のロールオーバーは利用できないようでした。

プルダウンメニューを作るにはDHTML的に、ブラウザ上に表示されないようにスタイル指定した要素を作ってそこに画像を配置し、その要素の表示・非表示の切り替え、画像のロールオーバーの制御をJavaScriptで行う方法を取った方がいいようです。

大変失礼しました。

回答No.3

noname#199778

#1です。 解決に至りませんでしたか…すみません。
#2の方の回答の方法もありましたね。

それでもなお動作しなかったときのことですが、エラーメッセージは確認されていますでしょうか?
もしエラーメッセージが確認できるのであれば、その内容も添えていただけると判断材料も増えるので、幾分的確な回答を得やすくなると思います(IEのスクリプトエラーの詳細情報では少々漠然としすぎるのですが…)。

また、上記の部分以外にもスクリプトがあるんですよね? そちらの方の問題はありませんか?
上記のスクリプトで書き出しているタグを、そのまま対象のページ上にHTMLとして書き出して、そこで正常に動作するかを確認してみるのも有効かもしれません。
HTMLとして書き出した部分で動作するのであれば、上の関数の記述方法に問題があるということになるでしょうし、それで動作しなければ他のところに問題があるということになると思います。

解決策にはなっていませんが… 失礼しました。

お礼

お返事ありがとうございました。

結局のところ、なぜ動作しないのか不明で、もっとシンプルな別の方法に変更しました。（というか詳しい方に、やってもらっちゃいました）

ご親切にアドバイスいただきましてありがとうございました。
これからもっと勉強しときます。

回答No.2

BlueRay

ズバリ、このようにしてみては如何でしょうか。
※少し見にくいので、スペースで改行しています。

"<A HREF='./topics/index.html'
　onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');'
　onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'>
　…"

↓

"<A HREF='./topics/index.html'
　onMouseOver=changeImage('pto01', './img/body-btn-pto01_over.gif');
　onMouseOut=changeImage('pto01', './img/body-btn-pto01.gif');>
　…"

changeImageの呼び出しには、「'」を付けなくてもエラーにはなりませんよ。