Изображение onclick change image, play sound and tooltip

Question

У меня есть изображение, и когда я нажимаю на него, изображение должно измениться на другое изображение. Кроме того, в то же время должен воспроизводиться звуковой файл и должна появляться всплывающая подсказка.

И было бы здорово, что после X секунд он будет переключен в исходное состояние, поэтому я могу щелкнуть его снова и снова, не обновляя весь сайт.

Я думал об изображении с OnClick методом яваскрипта, как:

<img src="../img/book_closed.jpg" id="image1" onclick=..."> 

Но я понятия не имею, как обращаться другие события ...

Это мой код до сих пор: http://pastebin.com/PHnzLsQq

Answer 1

Значит, вам нужно написать событие onclick.

Используйте setimeout, чтобы вернуть страницу обратно в исходное состояние.

<script type="text/javascript"> 
function onImageClick() { 
    // Set new state 
    setTimeout(function() { 
     // Set back to original state 
    }, 4000); 
} 
</script> 

<img src="../img/book_closed.jpg" id="image1" onclick="onImageClick();"> 

Answer 2

Вы должны использовать JS

var oImg = document.getElementById('image1'); 
oImg.addEventListener('click', function() { 

    oImg.src = //another image 

}); 

Это переключиться на другое изображение при нажатии

Answer 3

Попробуйте эту скрипку:

http://jsfiddle.net/MGY53/3/

Для аудио:

function imgChange(el,soundfile) 
{ 
    if (el.mp3) { 
    if(el.mp3.paused) el.mp3.play(); 
    else el.mp3.pause(); 
} else { 
    el.mp3 = new Audio(soundfile); 
    el.mp3.play(); 
} 
} 

Click:

onclick="imgChange(this, 'http://www.w3schools.com/tags/horse.ogg');"