[JAVASCRIPT] Effetto sonoro su onmouseover

**FrankyFive** · 25-10-2006, 16.13.53

Utilizzo il seguente script per il caricamento dei pulsanti del menu, dai nomi "pulsante_bX.gif", "pulsante_bX_over.gif", dove la X va da 1 a 7 (sette pulsanti) e quelli con estensione "_over" vengono visualizzati al passaggio del mouse per creare qualcosa di interattivo:

Codice HTML:

var clicked=""
var gtype=".gif"
var selstate="_over"
if (typeof(loc)=="undefined" || loc==""){
	var loc=""
	if (document.body&&document.body.innerHTML){
		var tt = document.body.innerHTML.toLowerCase();
		var last = tt.indexOf("pulsante.js\"");
		if (last>0){
			var first = tt.lastIndexOf("\"", last);
			if (first>0 && first<last) loc = document.body.innerHTML.substr(first+1,last-first-1);
		}
	}
}

document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>");
document.write("<td><img src=\""+loc+"pulsante_top.gif\" alt=\"\" width=\"133\" height=\"23\"></td>");
tr(false);
writeButton(loc+"","../home.htm","pulsante_b1",133,29,"","",0);
writeButton("","http://217.133.9.70:8080/","pulsante_b2",133,29,"","",0);
writeButton(loc+"","../galleria.htm","pulsante_b3",133,29,"","",0);
writeButton(loc+"","../guestbook.htm","pulsante_b4",133,29,"","",0);
writeButton(loc+"","../chat.htm","pulsante_b5",133,29,"","",0);
writeButton(loc+"","../contatti.htm","pulsante_b6",133,29,"","",0);
writeButton(loc+"","../links.htm","pulsante_b7",133,29,"","",0);
tr(true);
document.write("<td><img src=\""+loc+"pulsante_bottom.gif\" alt=\"\" width=\"133\" height=\"23\"></td>");
document.write("</tr></table>")
loc="";

function tr(b){if (b) document.write("<tr>");else document.write("</tr>");}

function turn_over(name) {
	if (document.images != null && clicked != name) {
		document[name].src = document[name+"_over"].src;
	}
}

function turn_off(name) {
	if (document.images != null && clicked != name) {
		document[name].src = document[name+"_off"].src;
	}
}

function reg(gname,name)
{
if (document.images)
	{
	document[name+"_off"] = new Image();
	document[name+"_off"].src = loc+gname+gtype;
	document[name+"_over"] = new Image();
	document[name+"_over"].src = loc+gname+"_over"+gtype;
	}
}

function evs(name){ return " onmouseover=\"turn_over('"+ name + "')\" onmouseout=\"turn_off('"+ name + "')\""}

function writeButton(urld, url, name, w, h, alt, target, hsp)
{
	gname = name;
	while(typeof(document[name])!="undefined") name += "x";
	reg(gname, name);
	tr(true);
	document.write("<td>");
	if (alt != "") alt = " alt=\"" + alt + "\"";
	if (target != "") target = " target=\"" + target + "\"";
	if (w > 0) w = " width=\""+w+"\""; else w = "";
	if (h > 0) h = " height=\""+h+"\""; else h = "";	
	if (url != "") url = " href=\"" + urld + url + "\"";
	
	document.write("<a " + url + evs(name) + target + ">");	
	
	if (hsp == -1) hsp =" align=\"right\"";
	else if (hsp > 0) hsp = " hspace=\""+hsp+"\"";
	else hsp = "";
	
	document.write("<img src=\""+loc+gname+gtype+"\" name=\"" + name + "\"" + w + h + alt + hsp + " border=\"0\" /></a></td>");
	tr(false);
}

Utilizzo il comando "onmouseover" per cambiare immagine del pulsante quando viene posizionato il puntatore sopra di esso.

Vorrei fare in modo che venisse caricato ed eseguito anche un piccolo effetto sonoro al passaggio del mouse ed in caso di click sul pulsante. Ho fatto alcune prove tramite la funzione document.write ma senza successo.

Chiedo ora a voi, a qualcuno di buona volontà, dove dovrei inserire il codice idoneo per ottenere quello che ho indicato.

Grasssssie!
FrankyFive

**dementialsite** · 26-10-2006, 10.08.43

Interrogando zio Google ho trovato questa pagina: http://www.lorenzone.it/javascript/f....php?idfile=15

Lo spiega per un link invece di un'immagine, ma non dovrebbe essere difficile adattarlo alle tue esigenze... ah, purtroppo lo script funziona solo con Internet Explorer...

Stammi bene...

26-10-2006, 14.20.31

tempo fa ho avuto un'esigenza simile alla tua e creai questo script abbastanza cross-browser (io l'ho provato solo con ie e ff, ma teorcamente dovrebbe funzionare con tutti)

Codice HTML:

<html>
<head>
<title>Test</title>
</head>
<script type="text/javascript">
if(!document.all)
	document.write("<div id=\"fr\" style=\"display:inline; width:0px; height:0px;\"></div>");
else
	document.write("<div id=\"fr\" style=\"display:none; width:0px; height:0px;\"></div>");

function bgsound(url)
{
	document.getElementById("fr").innerHTML="<embed id=\"m\" type=\"application/x-mplayer2\" src=\""+url+"\" autostart=\"1\" showcontrols=\"0\" loop=\"0\" hide=\"1\" width=\"0\"  height=\"0\">";
	
}
</script>
<body>
<img src="img.jpg" onclick="bgsound('http://www.sito.com/click.mp3')" onmouseover="bgsound('http://www.sito.com/mouseover.mp3')" alt="prova"/>
</body>
</html>

N.B.
qui non ho inserito anche il codice per stoppare i file qunaod il mouse esce dall'immagine, ma se ho capito bene dovrebbe essere superfluo...

**FrankyFive** · 27-10-2006, 16.10.26

Grazie a tutti per l'aiuto.

Ho adattato il codice di SoulHome perchè offre una compatibilità maggiore.

Ho aggiunto le righe di codice dello script subito dopo la dichiarazione delle variabili del mio script, e la chiamata a funzione bgsound('over.mp3') dentro la funzione turn_over():

Codice PHP:


function turn_over(name) {

    if (document.images != null && clicked != name) {

        document[name].src = document[name+"_over"].src;

        bgsound('over.mp3');

    }

}

anche se non ho capito se conviene inserirla nell'if o fuori; provando, funziona in entrambi i casi.

Ora vorrei inserire un altro effeto sonoro in caso di click sul pulsante.
Che codice dovrei aggiungere all'interno dello script che ho postato in testa al topic?

EDIT:
ok, ho implementato il tutto. Ho creato una nuova funzione da affiancare a turn_off e turn_over:

Codice PHP:


function turn_on(name) {

    if (document.images != null && clicked != name) {

        document[name].src = document[name+"_over"].src;

        bgsound('click.mp3');

    }

}

che viene richiamata al click del mouse, tramite una modifica alla funzione evs per utilizzare onCkick:

Codice PHP:


function evs(name){ return " onclick=\"turn_on('"+ name + "')\" onmouseover=\"turn_over('"+ name + "')\" onmouseout=\"turn_off('"+ name + "')\""}

Ora tutto funziona però... si, c'è sempre un però

, il tempo di reazione è notevole

. Quando il mouse passa sopra il pulsante o lo clicco, il suono parte mezzo secondo più tardi e l'effetto risulta pietoso. Pensando fosse un problema dei file sonori, li ho caricati in un editor di file audio ma non ho notato alcuno "spazio bianco" in testa agli stessi.

Che si può fare?
Aiutatemi, che sto impazzendo!

EDIT2:
ad una più attenta analisi il problema della latenza sul suono lo dà solo su firefox, mentre su ie non si sentono i suoni... c'è qualcosa che non va nello script di SoulHome

27-10-2006, 17.36.24

il problema è legato al fatto che ie riproduce i file anche se sono incompleti, firefox no, ciò avviene perlomeno utilizzando il tag embed, che purtoppo (che io sappia) è l'unico che funziona davvero con tutti i browser...

**FrankyFive** · 27-10-2006, 18.01.08

su ie i suoni non si sentono... ci deve essere qualche errore sullo script che mi hai dato, ma non capisco dove.

27-10-2006, 18.12.17

se provi il codice che ho spostato originariamente vedrai che funziona...forse hai cambiato qualcosa...per quanto riguarda la latenza penso che tu possa fare bene poco (a meno che non trovi il giusto tag object che funzioni su tutti i browser e che non abbia di questi problemi) se non impiegare file cortissimi e con un bit rate bassissimo

**FrankyFive** · 27-10-2006, 18.40.45

Ho provato una pagina "pulita" col codice che mi hai dato ma su ie i suoni non partono. Ho notato che dipende dal comando display:none che se impostato inline anche per ie, i suoni si sentono ma mentre vengono riprodotti scompaiono gli oggetti associati per poi ricomparire alla fine della riproduzione del suono.

Per quanto riguarda la latenza, non dipende dalla lunghezza del suono o dal bitrate ma dal tempo che impiega il browser a richiamare il player che, ho notato (eliminando il contentenuto del DIV), è quello di quicktime.

Utilizzando, invece, il comando bgsound standard di ie, i suoni sono reattivi che è una meraviglia ma, ovviamente, firefox non lo supporta

.

27-10-2006, 18.59.50

continuo a pensare che tu non abbia copiato correttamente il codice,nel codice che ho postato c'è un controllo che appunto crea 2 div diversi a seconda del browser in modo da essere compatibile con tutti e 2...io l'ho provato sul mio pc e funziona...tu che versioni usi?

**FrankyFive** · 27-10-2006, 23.34.29

codice della mia pagina:

Codice HTML:

<html>
<head>
<title>Test</title>
</head>
<script type="text/javascript">
if(!document.all)
	document.write("<div id=\"fr\" style=\"display:inline; width:0px; height:0px;\"></div>");
else
	document.write("<div id=\"fr\" style=\"display:none; width:0px; height:0px;\"></div>");

function bgsound(url)
{
	document.getElementById("fr").innerHTML="<embed id=\"m\" type=\"application/x-mplayer2\" src=\""+url+"\" autostart=\"1\" showcontrols=\"0\" loop=\"0\" hide=\"1\" width=\"0\"  height=\"0\">";
	
}
</script>
<body>
<img src="img.jpg" onclick="bgsound('wow.wav')" onmouseover="bgsound('wow.wav')" alt="prova"/>
</body>
</html>

Con firefox funziona, con ie il suono non si sente.

WinXp sp2 aggiornato all'ultimo update, ie 6, ff 2.

28-10-2006, 14.33.58

mha...a me quel codice funziona uso ff2 e ie6 anche io...mistero...
comunque se a te prorpio non va prova così:

Codice HTML:

<html> 
<head> 
<title>Test</title> 
</head> 
<script type="text/javascript"> 
if(!document.all) 
document.write("<div id=\"fr\" style=\"display:inline; width:0px; height:0px;\"></div>"); 
else 
document.write("<div id=\"fr\" style=\"display:none; width:0px; height:0px;\"></div>"); 
function bgsound(url) { 
if(!document.all)
document.getElementById("fr").innerHTML="<embed id=\"m\" type=\"application/x-mplayer2\" src=\""+url+"\" autostart=\"1\" showcontrols=\"0\" loop=\"0\" hide=\"1\" width=\"0\" height=\"0\">"; 
else 
document.getElementById("fr").innerHTML="<object type=\"application/x-mplayer2\" codebase=\"&lt;a href=\" http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=\"6,4,7,1112&quot;\" target=\"_blank\" height=\"0\" width=\"0\"><param name=\"AutoStart\" value=\"true\"><param name=\"ShowControls\" value=\"false\"><param name=\"ShowStatusBar\" value=\"false\"><param name=\"filename\" value=\""+url+"\"><param name=\"loop\" value=\"false\"></object>";
} 
</script>
<body>
<img src="img.jpg" onclick="bgsound('wow.wav')" onmouseover="bgsound('wow.wav')" alt="prova"/>
</body>
</html>

**FrankyFive** · 28-10-2006, 16.32.10

Si, così funge.
Su ie va alla grande non essendoci il problema del tempo di latenza che c'è in firefox. Sai se si può utilizzare del codice differente, più efficiente, per firefox o è proprio una lacuna del browser e nulla si può.

Grazie per la pazienza

Discussione: [JAVASCRIPT] Effetto sonoro su onmouseover

LinkBack

Strumenti discussione

Display

[JAVASCRIPT] Effetto sonoro su onmouseover

Regole di scrittura