NETSCAPEで表示がうまくいかない
-
0 名前： 匿名希望 ： 2006/06/21（水） 23:06
- 折りたたみメニューのようなのを作成してます。
IEだと問題なく動くのですが、
NETSCAPEになると、マウスオーバー・アウトで
ロールオーバーの画像が変わらなかったり
表示が消えるはずの箇所が残ったりします。
NETSCAPEでも、ちゃんと動く用にしたいです。
どなたかご助言を頂けないでしょうか？
ソースの中を抜粋しました
<A href ="BOOK.html" onMouseOver="On('img10');" onMouseOut="Off('img10');">
<IMG src ="10-1.png" border="0" NAME = "img10" alt = "">
</A></DIV>
<DIV class="Lmenu_Rmenu">
<A href ="CD.html" onMouseOver="On('img11');" onMouseOut="Off('img11');">
<IMG src ="11-1.png" border="0" NAME = "img11" alt = "">
</A></DIV>
<DIV class="Lmenu_Rmenu">
<A href ="DVD.html" onMouseOver="On('img12');" onMouseOut="Off('img12');">
<IMG src ="12-1.png" border="0" NAME = "img12" alt = "">
</A></DIV>
</DIV></div>
<SCRIPT type="text/javascript" src="java.js"></SCRIPT>
var img1on = new Image();
var img1off = new Image();
・
・
var img12on = new Image();
var img12off = new Image();
img1off.src = "1-1.png"; // 普段の画像
img1on.src = "1-2.png"; // ポイント時の画像
・
・
img12off.src = "12-1.png";
img12on.src = "12-2.png";
// ポイント時の処理
function On(name) {
if (document.images) {
document.images[name].src = eval(name + 'on.src');
}
}
// 放した時の処理
function Off(name) {
if (document.images) {
document.images[name].src = eval(name + 'off.src');
}
}
-
1 名前： S ： 2006/06/21（水） 23:06
- Googleで検索かけたらこんなの見つかったけど、これではいかが？
http://www.keynavi.net/ja/bugj/
なお、JavaScriptを使う場合はNOSCRIPT要素も適切に指定すること（使える環境でもあえてスクリプトをOFFにして閲覧している閲覧者もいる）。
http://www.zspc.com/documents/wcag10/index.html#gl-new-technologies
http://www.zspc.com/documents/wcag10-tech/index.html#tech-order-style-sheets
http://bakera.jp/html/opinion/zannen1.html
http://bakera.jp/html/opinion/zannen2.html
http://nekoshiki.poke1.jp/guidline/script.html
http://nekoshiki.poke1.jp/guidline/window.html
http://nekoshiki.poke1.jp/guidline/link.html
http://lan.rgr.jp/essay/javascript
http://www.avis.ne.jp/~tat/colmn/column013.html
-
2 名前： Pid ： 2006/06/21（水） 23:06
- >>0
抜粋とは言え，もう少し文法に気を遣われた方が良いと思います (^^;)。それはともかく，
(a). Netscape のバージョンはいくらでしょうか？そのスクリプトだと NN4 を想定しておられるようですが。
(b). mouseover/mouseout は，それぞれ独立したイベントです。つまり，「mouseover の次に mouseout，mouseout の次に mouseover」のように順番に発生する「わけではない」ことに注意して下さい。イベントを付ける要素を変えてみるとか，フラグを立ててタイミング調整するなど，工夫してみて下さい。
なお，ロールオーバーは CSS だけで十分可能です。せっかく img 要素に name/id 属性を付けるのであれば，この件は mouseover/mouseout ではなく :hover の方がはるかに楽だと思います。ついでに，多階層の折り畳みメニューも，WinIE6 以下での動作さえあきらめれば（また，複雑な機能が必要なければ）
ul li > ul { display: none; }
ul li:hover > ul { display: block; }
の 2 行で可能です。
-
3 名前： Pid ◆byEkK9OALr ： 2006/06/21（水） 23:06 ID:Vi/2deH/
- 今さら上げるのもどうかと思いますが、補足です。
mouseover/mouseout イベントタイプの場合、Event#relatedTarget に「直前にポイントされていたノード」が入りますので、それでタイミング調整できます。
IE の場合は、Event#fromElement、Event#toElement を見て下さい。
※本当になぜ今さら……検索で引掛っちゃったからさ orz。
-
4 名前： Pid ◆byEkK9OALr ： 2006/06/21（水） 23:06 ID:Vi/2deH/
- > Event#relatedTarget に「直前にポイントされていたノード」が入ります
訂正。
・mouseover イベントタイプ
Event#relatedTarget → 直前にポイントされていたノード（fromElement）
・mouseout イベントタイプ
Event#relatedTarget → 直後にポイントされているノード（toElement）
