WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:Netscape 7での動作がおかしいのは。。。

0:[投稿] さくら [2004/01/30 14:12 ][環境:IE5以上 NN6以上 ASP(iis)]

いつも参考にさせて頂いております。
先ほどは、gum様にレス頂き感謝しております。

以下のコードはIEでは、うまく動きました。
しかし、Netscape 7.1で動作確認すると下記コードの■部分のリストに
マウスが重なり、そしてマウスが外れても色がsilverに戻りません。

解決方法はないでしょうか?

宜しければ、アドバイスお願い致します。

<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; CHARSET=shift_jis">
<SCRIPT language=JavaScript>
function menuDisp(menu, arg) {
   var val = 'block';
   if (arg == 'off') val = 'none';
   if(document.all)                   //IE4用
       document.all(menu).style.display = val;
   else if (document.getElementById)  //N6,Moz,IE5,IE6用
       document.getElementById(menu).style.display = val;
   else if (document.layers[menu]) {  //NN4用
   if (val = 'none') val = 'hide';
       document.layers[menu].style.display = val;
   }
}
function onCommand(elem)    {
   elem.style.backgroundColor = "gray";
}
function offCommand(elem)    {
   elem.style.backgroundColor = "silver";
}
</SCRIPT>
</HEAD>
<BODY">
<table border="0">
<tr>
<td onmouseout="menuDisp('menu1','off');">
   <DIV onmouseover="menuDisp('menu1','on');" style="WIDTH: 100px; TOP: 0px; HEIGHT: 20px; BACKGROUND-COLOR: orange">◆テスト1</DIV>
    <!--↓■-->
  <DIV id=menu1 onmouseout="menuDisp('menu1','off');" onmouseover="menuDisp('menu1','on');" style="FONT-SIZE: 9pt; display:none; WIDTH: 100px; CURSOR: hand; COLOR: white; HEIGHT: 100px; BACKGROUND-COLOR: silver">
       <DIV onmouseover="onCommand(this);" style="padding: 5px" onmouseout="offCommand(this);"><A HREF='http://www.justsystem.co.jp/' STYLE='text-decoration:none;'><FONT COLOR='white'>JUSTSYSTEM</FONT></A></DIV>
       <DIV onmouseover="onCommand(this);" style="padding: 5px" onmouseout="offCommand(this);"><A HREF='http://www.microsoft.com/' STYLE='text-decoration:none;'><FONT COLOR='white'>MICROSOFT</FONT></A></DIV>
       <DIV onmouseover="onCommand(this);" style="padding: 5px" onmouseout="offCommand(this);"><A HREF='http://www.macromedia.co.jp/' STYLE='text-decoration:none;'><FONT COLOR='white'>MACROMEDIA</FONT></A></DIV>
       <DIV onmouseover="onCommand(this);" style="padding: 5px" onmouseout="offCommand(this);"><A HREF='http://www.adobe.co.jp/' STYLE='text-decoration:none;'><FONT COLOR='white'>Adobe</FONT></A></DIV>
   </DIV>
</td>
</tr>
</table>
</BODY>
</HTML>


1:[回答] AC [2004/01/31 14:07 ]

テスト用に、こんな文書を書いてみた。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>メニューのテスト</TITLE>
<META http-equiv=Content-Type content="text/html; CHARSET=shift_jis">
<SCRIPT type="text/javascript">
var obj;
function menuDisp(menu,arg) {
    var val = 'block';
    if (arg == 'off') val = 'none';
    if(document.all)                    //IE4用
        document.all(menu).style.display = val;
    else if (document.getElementById)    //N6,Moz,IE5,IE6用
        document.getElementById(menu).style.display = val;
    else if (document.layers[menu]) {    //NN4用
    if (val = 'none') val = 'hide';
        document.layers[menu].style.display = val;
    }
}
function onCommand(elem) {
    elem.style.backgroundColor = "gray";
    obj.value += 'in:'+elem.id+'\n';
}
function offCommand(elem) {
    elem.style.backgroundColor = "silver";
    obj.value += 'out:'+elem.id+'\n';
}
function init_obj() {
    obj = document.getElementById('log');
}
</SCRIPT>
<style type="text/css">
#menuheader1 {
    width:100px;
    top:0px;
    height:20px;
    color:black; background-color:orange;
}
#menu1 {
    font-size:9pt;
    display:none;
    width:100px;
    cursor:hand;
    color:white; background-color:silver;
    height:100px;
    margin:0; padding:0;
    list-style:none;
}
#menu1 li {
    margin:0;
    padding:5px;
}
#menu1 li a:link, #menu1 li a:visited {
    color:white; background-color:transparent;
    text-decoration:none;
}

#log-block {
    position:fixed;
    top:10em;left:3em;
}
</style>
</HEAD>
<BODY onload="init_obj()">
<div onmouseout="menuDisp('menu1','off');">
    <DIV id="menuheader1" onmouseover="menuDisp('menu1','on');">◆テスト1</DIV>
    <!--↓■-->
    <ul id="menu1" onmouseout="menuDisp('menu1','off');" onmouseover="menuDisp('menu1','on');">
        <li id="l1" onmouseover="onCommand(this);" onmouseout="offCommand(this);">
            <A HREF='http://www.justsystem.co.jp/'>JUSTSYSTEM</A>
        </li>
        <li id="l2" onmouseover="onCommand(this);" onmouseout="offCommand(this);">
            <A HREF='http://www.microsoft.com/'>MICROSOFT</A>
        </li>
        <li id="l3" onmouseover="onCommand(this);" onmouseout="offCommand(this);">
            <A HREF='http://www.macromedia.co.jp/'>MACROMEDIA</A>
        </li>
        <li id="l4" onmouseover="onCommand(this);" onmouseout="offCommand(this);">
            <A HREF='http://www.adobe.co.jp/'>Adobe</A>
        </li>
    </ul>
</div>
<p id="log-block"><textarea rows="10" cols="30" id="log"></textarea></p>
</BODY>
</HTML>

続く。


2:[回答] AC [2004/01/31 14:13 ]

Caminoでの結果。
in:l1
in:l1
out:l1
in:l1
in:l2
out:l2
in:l2
in:l3
out:l3
in:l3
in:l4
out:l4
in:l4
onmouseoutイベントの後でonmouseoverイベントが発生している。
Netscape7もGecko搭載なのでたぶん同じ。

解決編に続く。


3:[回答] AC [2004/01/31 14:20 ]

解決編。
Geckoは*:hoverをCSS2仕様通りに解釈するので、JavaScriptを使わずに、
:hoverでやればよい。
<style type="text/css">
#menu1 li:hover {
    color:white; background:silver;
}
#menu1 li {
    color:white; background:gray;
}
</style>
なお、カーソルがメニューの外に出てもメニューが引っ込まない場合もある
不具合は直っていません。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World