HTML / JavaScript - onMouseover меняет изображение и воспроизводит звук, onMouseout восстанавливает изображение до нормального - PullRequest
Новая
       28

HTML / JavaScript - onMouseover меняет изображение и воспроизводит звук, onMouseout восстанавливает изображение до нормального

0 голосов
/ 12 мая 2011

Я играю с чем-то в HTML, могу ли я воспроизводить звук при наведении курсора мыши на изображение, а также менять изображение, пока мышь остается там?

Общий обзор для разработчика был бы отличным!Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2013

Изменяющееся изображение должно обрабатываться с помощью 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, и вы можете сделать это с HTML5-совместимыми браузерами, которые поддерживаютMP3 (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.

0 голосов
/ 12 мая 2011

Да, но вам понадобится 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
}

Вам нужна помощь со звуком тоже?

...