2

誰かが画像の上にマウスを置くたびにドロップダウンメニューを表示しようとしています。

    <div>
        <img id="whoimg" onmouseover="forImg(this)" src="/static/images/whoisitfor.png" height="70" style="cursor:pointer;">
    </div>

    <div style="position: absolute; right:30px; top: 23px;">
        <span style="font-weight: bold;font-size:30px; color: #C4066B;">FOR</span>
    </div>

</div>

onmouseover関数を書くことができます。しかし、私はWeb開発に慣れていないので、次に何をすべきかわかりません。上を含めて3枚の画像を横に並べています。

function forImg()
{
alert("FOR");
}

javascriptを試しましたが、どこにも行きません。どうしたらいいかわからない...助けてください

4

3 に答える 3

6

画像の上にマウスオーバーするとドロップダウンメニューが表示されます。

これをあなたのメニューにしましょう： 

 <div id="nav_menu">
            <ul>
                <li id="l1">AAAAA</li>
                <li>BBBBB</li>
                <li>CCCCC</li>
                <li>DDDDD</li>
            </ul>
   </div>

次のように画像のバインドイベント：

$('#whoimg').mouseover( function(){
    $('#nav_menu').slideDown();
});

デモフィドル

于 2013-03-24T17:14:38.277 に答える
1

これにはCSSを使用することを強くお勧めします。グーグルを行う場合は、利用できるチュートリアルがたくさんあります...または、簡単な方法で次のようなサイトを使用することもできます：http: //cssmenumaker.com/css-drop-down-menu

于 2013-03-24T17:18:30.417 に答える
0

ここでそれがどのように機能するかを見てください...私はこれがあなたを助けると確信しています...評価することを忘れないでください。

頑張ってください！

<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}

function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

</body>
</html>
于 2013-03-24T17:18:37.153 に答える