图片onclick更改图片，播放声音和提示

我有一个图像，当我点击它时，图像应该更改为另一张图片。此外，应同时播放音频文件并出现工具提示。图片onclick更改图片，播放声音和提示

它会很好，它会在X秒后切换到原始状态，所以我可以一次又一次地点击它，而无需刷新整个网站。

我在想使用JavaScript的onclick方法的图像，如：

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

但我不知道如何处理其他事件...

这是我到目前为止的代码： http://pastebin.com/PHnzLsQq

来源

2013-12-15 user3087516

您是否尝试过的东西？我们可以看到你的'js'代码吗？ –

我已更新我的帖子，并附有我目前的密码 – user3087516

所以你需要写一个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();">

来源

2013-12-15 15:01:12

感谢您的回答！你可以检查一下我的pastebin，告诉我如何用播放的音频和工具提示处理它吗？ – user3087516

所以在html中播放音频文件：http：//www.w3schools.com/html/html_sounds.asp http://www.w3schools.com/html/html_sounds.asp 你可以设置img.src =“NewImageSource “;改变形象。 –

你必须用js

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

    oImg.src = //another image 

});

这将切换到另一个图像点击

来源

2013-12-15 15:04:11

感谢您的回答！我已经处理了图像切换。它仍然是播放音频文件，并会出现一个工具提示。我怎么能在同一时间做到这一点？ – user3087516

工具提示会自动出现，我相信。您可能关注的音频。 – 2013-12-15 15:07:41

时，试试这个小提琴：

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

点击：

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

来源

2013-12-15 15:37:14 Zword

图片onclick更改图片，播放声音和提示

回答

相关问题