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

Question

我正在玩 HTML 中的某些内容，我可以在鼠标悬停图像时播放声音，并在鼠标停留在该位置时更改图像吗？

总体开发者观点会很棒！

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 的 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
    })

})()

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

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