onmouseover e onmouseout su hotspot

pati · 5 Feb 2014

Ciao a tutti. Torno su un argomento in parte già affrontato. Ho "mappato" un'immagine di fondo con vari hotspot e ho creato div che in apertura sono in stato "hidden" e al cui interno ho inserito immagini. I div sono da sovrapporre agli hotspot e vengono resi visibili con la funzione "onmouseover". Va tutto bene ma non funziona "onmouseout" che dovrebbe rendere "hidden" i div una volta tolto il cursore sull'hotspot relativo. Chissà se ho reso l'idea? Grazie a chiunque mi può aiutare a capire cosa sbaglio.

LorenzoPi · 6 Feb 2014

se posti il codice è meglio

pati · 11 Feb 2014

LorenzoPi ha scritto:
se posti il codice è meglio

Scusa il ritardo, mi ricollego solo oggi. Questo è il codice:

HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

<body>

<div id="uno" style="visibility:hidden; position:absolute; left: 24px; top: 142px;"><a href="piripicchio.htm"><img src="18.png" border="0"></a></div>
<div id="due" style="visibility:hidden; position:absolute; left: 175px; top: 234px;"><a href="piripicchio.htm"><img src="11.png" border="0"></a></div>
<div id="tre" style="visibility:hidden; position:absolute; left: 7px; top: 194px;"><a href="piripicchio.htm"><img src="16.png" border="0"></a></div>

<img src="mapparoma.png" width="414" height="477" border="0" usemap="#Map">
<map name="Map" id="map">
  <area shape="poly" coords="62,146,68,147,72,170,100,183,121,179,121,189,134,189,137,198,145,195,151,203,173,210,174,220,169,223,154,219,146,223,138,218,127,223,107,220,92,225,70,220,56,213,43,206,31,198" href="piripicchio.htm" onMouseOver="document.getElementById('uno').style.visibility = 'visible';" onmouseout="document.getElementById('uno').style.visibility = 'hidden'; return false" />
  <area shape="poly" coords="186,238,191,235,208,243,223,248,240,262,235,270,240,275,274,322,266,339,231,319,233,312,220,283,199,283,191,279,190,264,178,255,180,248,188,250" href="piripicchio.htm" onMouseOver="document.getElementById('due').style.visibility ='visible';" onmouseout="document.getElementById('due').style.visibility = 'hidden';">
  <area shape="poly" coords="32,205,25,213,16,220,28,237,31,245,35,257,40,263,64,253,78,259,94,261,135,243,155,251,174,237,182,235,182,229,175,223,167,228,155,223,149,229,137,223,129,228,109,223,95,229" href="piripicchio.htm" onMouseOver="document.getElementById('tre').style.visibility ='visible';" onmouseout="document.getElementById('tre').style.visibility = 'hidden';">
</map>

</body>
</html>

Non sono ancora riuscita a trovare una soluzione.
Ho provato anche con un altro codice che funziona benissimo se la funzione "onmouseover" è relativa ad una parola ma se al posto della parola utilizzo l'areashape non funziona niente!! Grazie!

LorenzoPi · 11 Feb 2014

Ho visto che nel javascript c'erano cose del tipo:

Codice:

document.getElementById('uno').style. visibility = 'visible';  // non va bene perché tra ').style. e visibility = 'visible'; c'è uno spazio! non ci devono essere spazi quando chiami una proprietà di un oggetto!

Ho rimesso a posto la parte di javascript e adesso prova adesso così:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script language="JavaScript" type="text/JavaScript">

		</script>
		<style type="text/css">

			body {
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			}

		</style>
	</head>

	<body>

		<div id="uno" style="visibility:hidden; position:absolute; left: 24px; top: 142px;"><a href="piripicchio.htm"><img src="18.png" border="0"></a></div>
		<div id="due" style="visibility:hidden; position:absolute; left: 175px; top: 234px;"><a href="piripicchio.htm"><img src="11.png" border="0"></a></div>
		<div id="tre" style="visibility:hidden; position:absolute; left: 7px; top: 194px;"><a href="piripicchio.htm"><img src="16.png" border="0"></a></div>

		<img src="mapparoma.png" width="414" height="477" border="0" usemap="#Map">
		<map name="Map" id="map">
		<area shape="poly" coords="62,146,68,147,72,170,100,183,121,179,121,1 89,134,189,137,198,145,195,151,203,173,210,174,220 ,169,223,154,219,146,223,138,218,127,223,107,220,9 2,225,70,220,56,213,43,206,31,198" href="piripicchio.htm" onmouseover="document.getElementById('uno').style.visibility = 'visible';" onmouseout="document.getElementById('uno').style.v isibility = 'hidden'; return false" />
		<area shape="poly" coords="186,238,191,235,208,243,223,248,240,262,23 5,270,240,275,274,322,266,339,231,319,233,312,220, 283,199,283,191,279,190,264,178,255,180,248,188,25 0" href="piripicchio.htm" onmouseover="document.getElementById('due').style.visibility ='visible';" onmouseout="document.getElementById('due').style.visibility = 'hidden';">
		<area shape="poly" coords="32,205,25,213,16,220,28,237,31,245,35,257, 40,263,64,253,78,259,94,261,135,243,155,251,174,23 7,182,235,182,229,175,223,167,228,155,223,149,229, 137,223,129,228,109,223,95,229" href="piripicchio.htm" onmouseover="document.getElementById('tre').style.visibility ='visible';" onmouseout="document.getElementById('tre').style.visibility = 'hidden';">
		</map>

	</body>
</html>

Dovrebbe funzionare come dici tu

fammi sapere!

pati · 11 Feb 2014

Ciao LorenzoPi, grazie, in effetti ora funziona! Non avevo proprio visto quello spazio. Solo una cosa: il rollover è un pochino traballante. E solo alla fine della prima area shape, c'è la funzione "return false". Grazie, il tuo intervento è stato determinante!

glm1986ITALY · 11 Feb 2014

Pati ti pregherei di inserire il codice in maniera corretta e come da regolamento :fonzie:

LorenzoPi · 11 Feb 2014

Aspetta scusa c'è ancora uno spazio!! xD
ecco adesso non ci sono più:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script language="JavaScript" type="text/JavaScript">

		</script>
		<style type="text/css">

			body {
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			}

		</style>
	</head>

	<body>

		<div id="uno" style="visibility:hidden; position:absolute; left: 24px; top: 142px;"><a href="piripicchio.htm"><img src="18.png" border="0"></a></div>
		<div id="due" style="visibility:hidden; position:absolute; left: 175px; top: 234px;"><a href="piripicchio.htm"><img src="11.png" border="0"></a></div>
		<div id="tre" style="visibility:hidden; position:absolute; left: 7px; top: 194px;"><a href="piripicchio.htm"><img src="16.png" border="0"></a></div>

		<img src="mapparoma.png" width="414" height="477" border="0" usemap="#Map">
		<map name="Map" id="map">
		<area shape="poly" coords="62,146,68,147,72,170,100,183,121,179,121,1 89,134,189,137,198,145,195,151,203,173,210,174,220 ,169,223,154,219,146,223,138,218,127,223,107,220,9 2,225,70,220,56,213,43,206,31,198" href="piripicchio.htm" onmouseover="document.getElementById('uno').style.visibility = 'visible';" onmouseout="document.getElementById('uno').style.visibility = 'hidden'; return false" />
		<area shape="poly" coords="186,238,191,235,208,243,223,248,240,262,23 5,270,240,275,274,322,266,339,231,319,233,312,220, 283,199,283,191,279,190,264,178,255,180,248,188,25 0" href="piripicchio.htm" onmouseover="document.getElementById('due').style.visibility ='visible';" onmouseout="document.getElementById('due').style.visibility = 'hidden';">
		<area shape="poly" coords="32,205,25,213,16,220,28,237,31,245,35,257, 40,263,64,253,78,259,94,261,135,243,155,251,174,23 7,182,235,182,229,175,223,167,228,155,223,149,229, 137,223,129,228,109,223,95,229" href="piripicchio.htm" onmouseover="document.getElementById('tre').style.visibility ='visible';" onmouseout="document.getElementById('tre').style.visibility = 'hidden';">
		</map>

	</body>
</html>

Comunque prego

pati · 12 Feb 2014

glm2006ITALY ha scritto:
Pati ti pregherei di inserire il codice in maniera corretta e come da regolamento :fonzie:

Mi spiace, ho sbagliato in completa buona fede.

glm1986ITALY · 12 Feb 2014

Figurati: non ammazzo nessuno

pati · 13 Feb 2014

Bene, grazie ancora, adesso funziona come pensavo.L'unica cosa che non si mette a posto è l'instabilità del rollover, trema, l'immagine chiamata non sta ferma......

pati · 13 Feb 2014

No, scusate rettifico. Non funziona, cioè non prende il link alla pagina chiamata sia nel div che nell'hotspot con href. Perchè questo link si attivi devo mettere "onmouseleave" al posto di "onmouseout" però così facendo, quando tolgo il cursore dall'area shape, non si torna allo stato "hidden"

LorenzoPi · 13 Feb 2014

Come non sta ferma? in che senso? xD

pati · 13 Feb 2014

LorenzoPi ha scritto:
Come non sta ferma? in che senso? xD

Quando passo con il cursore, appare l'immagine che è nel div ma, come dire, "traballante" e soprattutto non funziona il link. Ma come ho già detto, per far funzionare il link devo scrivere "onmouseleave" solo che così il div non torna poi allo stato "hidden".......

LorenzoPi · 13 Feb 2014

Se metti online questa cosa posso vederla meglio e ti faccio sapere

pati · 13 Feb 2014

LorenzoPi ha scritto:
Se metti online questa cosa posso vederla meglio e ti faccio sapere

Non so come fare, non ho dove metterla...

LorenzoPi · 13 Feb 2014

caricalo su altervista!

.. oppure senno metti tutto il codice qua su uno di questi siti: http://jsfiddle.net/ o http://codepen.io/ e poi ci condivi il link

Cerca

Cerca

onmouseover e onmouseout su hotspot

pati

Utente Attivo

LorenzoPi

Utente Attivo

pati

Utente Attivo

LorenzoPi

Utente Attivo

pati

Utente Attivo

glm1986ITALY

Moderatore

LorenzoPi

Utente Attivo

pati

Utente Attivo

glm1986ITALY

Moderatore

pati

Utente Attivo

pati

Utente Attivo

LorenzoPi

Utente Attivo

pati

Utente Attivo

LorenzoPi

Utente Attivo

pati

Utente Attivo

LorenzoPi

Utente Attivo

Discussioni simili