javascript - onMouseover 改变图像和播放声音，onMouseout 重置图像恢复正常

Question

我正在玩 HTML 中的某些东西，我可以在mouseover图像上播放声音以及在鼠标停留在那里的同时更改图像吗？

总体开发人员视图会很棒！

Answer 1

是的，但是你需要 JavaScript 来为你做很多这样的事情。

对于图像，您可以执行两个操作：

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

然后你的两个函数将做你想做的事情：

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

你也需要声音方面的帮助吗？

Answer 2

变化的图像应该用 CSS 而不是 Javascript 来处理，声音播放应该用 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（Chrome、Safari、IE9）的 HTML5 兼容浏览器执行此操作，具体如下：

;(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
    })

})()

如果您想支持旧版浏览器，请使用 jQuery 或 MooTools 之类的 DOM 内容，如果您想通过声音支持旧版浏览器，请使用 SoundManager2 ( http://www.schillmania.com/projects/soundmanager2/ ) 或使用多个音频源以获得更好的支持，例如 OGG 和 MP3 源。

这里的“正确”答案在实现方面是正确的，但是您应该尝试尽可能地分离您的关注点，并且切换图像是一种样式关注点，可以通过 CSS 而不是 Javascript 轻松处理。