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（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这样的东西，如果你想用你的声音支持旧的浏览器，可以使用SoundManager2（http://www.schillmania.com/projects/soundmanager2/）或者使用多个音频源来获得更好的效果支持，例如OGG和MP3源。

这里的“正确”答案在实现方面是正确的，但你应该尝试尽可能地区分你的问题，而切换图像是一种风格问题，可以通过CSS而不是Javascript轻松处理。 / p>

HTML / JavaScript - onMouseover更改图像和播放声音，onMouseout将图像重置为正常

2 个答案: