0

HTML で遊んでいるのですがmouseover、マウスを置いたまま画像を変更したり、画像の音を鳴らしたりできますか?

全体的な開発者ビューは素晴らしいでしょう!

4

2 に答える 2

0

はい。ただし、これを行うには JavaScript が必要です。

画像の場合、次の 2 つのアクションを実行できます。

<img id="imgID" scr="img/image.jpg" onmouseover="imgover();" onmouseout="imgout();" />

次に、2 つの関数が目的の処理を実行します。

imgover () {
    document.getElementByID("imgID").scr = "img/newimage.jpg";
    //Code to play sound
}
imgout () {
    document.getElementByID("imgID").scr = "img/image.jpg";
    //Code to stop sound
}

音についても助けが必要ですか？

于 2011-05-12T01:10:49.753 に答える
0

変化する画像は Javascript ではなく CSS で処理し、サウンドの再生は Javascript で処理する必要があります。

HTML:

<div class="hover_sound"></div>

CSS:

.hover_sound {
    background: url(image.png) no-repeat;
    height: 200px;
    width: 200px;
}

.hover_sound:hover { url(image_hover.png) no-repeat}

Javascript:

サウンドの再生は Javascript で処理する必要があり、MP3 をサポートする HTML5 準拠のブラウザー (Chrome、Safari、IE9) では、次のように実行できます。

;(function() {

    // get the hover element and instantiate sound.
    var hoverSoundElement = document.querySelector(".hover_sound")
      , sound = new Audio("mysound.mp3")

    // play the sound when the mouse enters.
    hoverSoundElement.addEventListener("mouseover", sound.play.bind(sound))

    hoverSoundElement.addEventListener("mouseout", function() {

        // stop the sound when the mouse leaves.
        sound.pause()

        // reset sound's position to the beginning.
        sound.currentTime = 0
    })

})()

古いブラウザーをサポートしたい場合は、DOM 用に jQuery や MooTools などを使用し、サウンドで古いブラウザーをサポートしたい場合は、SoundManager2 ( http://www.schillmania.com/projects/soundmanager2/ )を使用します。 OGG や MP3 ソースなど、複数のオーディオ ソースを使用してサポートを強化します。

ここでの「正しい」答えは実装に関しては正しいですが、懸念事項を可能な限り分離するようにしてください。画像の切り替えは、Javascript ではなく CSS で簡単に処理できるスタイルの問題です。

于 2013-02-28T13:29:53.353 に答える