Immagini con audio

Images with audio





Audio al passaggio del mouse:

Esempio:

Codice:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<div>

<script>
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
}
function createsoundbite(sound){
    var html5audio=document.createElement('audio')
    if (html5audio.canPlayType){ //check support for HTML5 audio
        for (var i=0; i<arguments.length; i++){
            var sourceel=document.createElement('source')
            sourceel.setAttribute('src', arguments[i])
            if (arguments[i].match(/\.(\w+)$/i))
                sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
            html5audio.appendChild(sourceel)
        }
        html5audio.load()
        html5audio.playclip=function(){
            html5audio.pause()
            html5audio.currentTime=0
            html5audio.play()
        }
        html5audio.stopclip=function(){
        html5audio.pause()
        }
        return html5audio
    }
    else{
        return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
    }
}

var mouseoversound1=createsoundbite("file.mp3")
</script>
<a nohref onmouseover="mouseoversound1.playclip()" onmouseout="mouseoversound1.stopclip()">
<img src="URLimmagine" style="width:200px;border:0px;"></a>

</div>

</body>
</html>
 
Fonte

Al posto di "file.mp3" mettete l'indirizzo del file audio. Potete usare i formati di file indicati nel codice, o aggiungerne altri. Per essere sicuri che l'audio sia supportato su tutti i dispositivi, potete mettere l'indirizzo di diversi formati dello stesso audio, in questo modo:

var mouseoversound1=createsoundbite("file.ogg", "file.mp3")

Al posto di "URLimmagine" mettete l'indirizzo dell'immagine.

Tenete presente che l'evento "onmouseover" non e` sempre supportato dai browser dei dispositivi mobili, mentre l'evento "onclick", in genere, e` supportato.

Audio al click del mouse:

Esempio:

Sostituite la parte finale del codice precedente (in verde) con questa:


var clicksound1=createsoundbite("file.ogg")
</script>
<a nohref onclick="clicksound1.playclip()">
<img src="URLimmagine"></a>


Se volete che dopo il click l'utente venga indirizzato ad una nuova pagina, modificate la parte finale  (dopo </script>) in questo modo:

<a href="URLcollegamento" target="_blank"  onclick="clicksound1.playclip()">
<img src="URLimmagine"></a>





Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in     

Ti e` stato utile questo argomento?