0

ナビゲーションメニューのxhtmlページでマウスオーバーとマウスアウトの効果を取得しようとしています。

このコードはFirefoxでのみ機能しますが、それ以外は機能しません。誰かがそれをすべてのブラウザで動作させる方法を教えてもらえますか？

これが私のコードです：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<title>title</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript">
/* <![CDATA[*/
    function roll_over(img_name, img_src)
    {
        document[img_name].src = img_src;
    }

/* ]]> */
</script>


                <li><a href="index.html" onmouseover="roll_over('home', 'images/homeSelected.png')" onmouseout="roll_over('home', 'images/home.png')" ><img src="images/home.png" alt="Home" id="home" /></a></li>
              <li><a href="about.html" onmouseover="roll_over('about', 'images/aboutSelected.png')" onmouseout="roll_over('about', 'images/about.png')" ><img src="images/about.png" alt="About Me" id="about" /></a></li>
              <li><a href="portfolio.html" ><img src="images/portfolioSelected.png" alt="My Portfolio" id="portfolio" /></a></li>
              <li><a href="contact.html" onmouseover="roll_over('contact', 'images/contactSelected.png')" onmouseout="roll_over('contact', 'images/contact.png')" ><img src="images/contact.png" alt="Contact Me" id="contact" /></a></li>

        </ul>
    </div>
</div>

ChromeとIE7＆8でこれを試しましたが、エラーが解決しません。Safariでエラーが発生します：TypeError：式の結果'document[img_name]'[undefined]はオブジェクトではありません。 "

4

2 に答える 2

3

Safariの現在のリリースでは、残念ながらマウスオーバーは無視されます。これは、6S以前のAppleタッチスクリーン（iPhone、iPad）には、押す前にマウスが何かの上にあるという同等の概念がなかったため、マウスオーバーを使用すると、タッチスクリーンデバイスで期待どおりに機能しなかったインターフェイスが表示されます。

そのため、一貫したデザインを促進するために、Safariはマウスを搭載したデバイスでもマウスオーバーのサポートを停止しました。

于 2015-09-14T20:18:45.513 に答える
1

関数を次のように変更してみます。

 function roll_over(img_name, img_src) 
    { 
        document.getElementById(img_name).src = img_src; 
    }

<img>そうすれば、渡されたIDを使用して直接選択することになります。

于 2010-09-18T00:33:04.303 に答える