WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

Geluid bij MouseOver, JavaScript, HTML 5

6 februari 2014

Met HTML 5 kun je gebruik maken van bepaalde dingen die in eerdere versies niet konden, hier gebruiken we de <audio> tag.

We laten een geluid horen als er met de muis over een link wordt gegaan (zg. MouseOver).

Probeer maar eens.

Link 1   Link 2   Link 3

Zet dit (groene) stukje tussen de <head> en </head> tag.

<script type="text/javascript">
<!--
function geluidBijmuisop() {
geluiden='<audio autoplay>\n';
geluiden+='<source src="geluid/mouseover01.mp3"></source>\n';
geluiden+='</audio>\n';
document.getElementById('geluid').innerHTML=geluiden;
}
//-->
</script>

En dit (groene) stukje in de <body>, waar je maar wilt.

<div id="geluid">
<audio preload="auto">
<source src="geluid/mouseover01.mp3"></source>
</audio>
</div>

De link waar je het geluid aan wilt koppelen ziet er zo uit:

<a href="#" onMouseover="geluidBijmuisop();">Link 1</a>

Waarbij je het hekje (#) vervangt door het adres van de link en 'Link 1' door jouw eigen tekst.

Geluidsbestand

Er moet wel en geluidsbestand zijn wat te horen wordt gebracht, zoek of maak een kort mp3tje liefst korter dan een halve seconde.
Pas het pad (hier 'geluid/mouseover01.mp3') en de bestandsnaam (hier 'mouseover01.mp3') aan.

Doctype

Om dit te laten functioneren moet je <!DOCTYPE html> bovenaan je pagina hebben staan.

 

Divider

WebKnutselaarsHulpjesDisclaimer: de auteur van WebKnutselaarsHulpjes zal geen enkele aansprakelijkheid aanvaarden voor schadelijke gevolgen, lichamelijke klachten, slapeloze nachten, of enig ander gevolg van het gebruik van de hier getoonde voorbeelden.