Problema con onMouseOut

**DeMoN3** · 01-11-2010, 00:22

Salve a tutti, ho un problemino con un semplice script, che però non riesco a far funzionare a dovere...

Ecco il codice

codice:

<script>
			function cambia_immagine(foto1,foto2)
			{
				document.getElementById('foto1').src=foto1; document.getElementById('foto2').src=foto2; 
			}
		</script>




<div class="fleft">
							[img][/img]
							
							[img][/img]
						</div>
						<div class="clear">
						</div>
						<div class="fleft" onMouseOut="javascript:cambia_immagine('images/copertina.jpg', 'images/copertina.jpg')">
							<table class="fleft">
								<tbody>
									<tr>
										<td>bla</td>
										<td>bla</td>
								        </tr>
									<tr>
										<td colspan="2">
											<div class="voci_prodotti">
												<table>
													<tr class="light_blue" onMouseOver="javascript:cambia_immagine('images/immagini_componenti/2603_righello.gif', 'images/immagini_componenti/2603_schema.jpg')">
<td>bla</td>
<td>bla</td>
</tr>
													<tr onMouseOver="javascript:cambia_immagine('images/immagini_componenti/dpl043_righello.gif', 'images/immagini_componenti/dpl043_schema.jpg')">
														<td>bla</td>
<td>bla</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

il div dentro alla tabella serve in quanto quel div ha overflow-x:auto e mi permette di creare delle linee di tabella che scrollano lasciando l'intestazione fissa.

Il problema è uno: come vedete dal codice ho fatto in modo che passando (onmouseover) il mouse sulle righe della tabella le immagini vengono sostituite, mentre togliendo il mouse dal div (onmouseout) viene messa un'immagine di default (copertina.jpg). Il problema è che se io tolgo il mouse dalla riga e lo "appoggio" sulla tabella, viene ripristinata l'immagine di default come se avessi impostato il "onmouseout" anche sul tr o se avessi messo un "onmouseover" sulla tabella...avete qualche consiglio?è tutta la sera che cerco di sistemarlo senza successo

grazie a tutti

**cavicchiandrea** · 01-11-2010, 12:16

Credo (se ho capito cosa vuoi fare) perché usi un div contenitore per la tabella se imposti il onmouseout sulla tabella dovresti risolvere tipo:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<table style="text-align: left; width: 100%;"
onmouseover="this.style.backgroundColor='#fff000'; "
onmouseout="this.style.backgroundColor='';" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='';">
<td style="vertical-align: top;">

</td>
</tr>
<tr>
<td style="vertical-align: top;">

</td>
</tr>
</tbody>
</table>

</body>
</html>
per l'esempio ho usato i colori, ma il concetto non cambia.

**Xinod** · 01-11-2010, 14:11

non ti e' chiaro come si propagano gli eventi
e' un discorso parecchio lungo, inzia col leggere questo
http://javascript.html.it/articoli/l...-e-javascript/
poi passa a questo
http://javascript.html.it/articoli/l...ser-ed-esempi/

dopo che ti sara' chiaro dov'e' l' errore concettuale puoi trovare una soluzione crossbrowser, per esempio

codice:

<style type="text/css">
div {background:#f00;padding:10px;}
p {background:#0f0;padding:10px;}
</style>
<script type="text/javascript">
function fuori(e,el){
	e=window.event||e;
	var trg=e.relatedTarget||e.toElement;
	while(trg!=null){
		if(trg==el) return;
		trg=trg.parentNode;
	}
	alert('fuori dal div!');
}
</script>
<div onmouseout="fuori(event,this)">
sono un div


sono un paragrafo</p>
</div>

ciao

**DeMoN3** · 01-11-2010, 20:24

Dopo cena leggo le due dispense allegate, grazie mille

Discussione: Problema con onMouseOut

Strumenti discussione

Ricerca discussione

Visualizza

Problema con onMouseOut

Permessi di invio