onmouseover e onmouseout su hotspot

pati

Utente Attivo
31 Gen 2007
64
0
6
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.
 

pati

Utente Attivo
31 Gen 2007
64
0
6
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!
 
Ultima modifica di un moderatore:

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
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

Utente Attivo
31 Gen 2007
64
0
6
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!:)
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
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 ;)
 
Ultima modifica:

pati

Utente Attivo
31 Gen 2007
64
0
6
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

Utente Attivo
31 Gen 2007
64
0
6
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" :(
 

pati

Utente Attivo
31 Gen 2007
64
0
6
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".......
 
Discussioni simili
Autore Titolo Forum Risposte Data
G Onmouseout e onmouseover funziona solo lato backend Joomla 0
T [PHP] [HTML] Action direttamente associate a onmouseover PHP 11
L onmouseover su div parenti indesiderato HTML e CSS 3
F onmouseover Javascript 3
K onMouseOver su immagine Javascript 2
K onmouseover anteprima immagine come in google Javascript 2
LolliPoppingu Problema "onmouseover". HTML e CSS 24
H Funzione onmouseover per mostrare un box con un link da cliccare? Javascript 3
B onmouseover, immagini multiple su hotspot map Javascript 3
S Codice OnMouseOver Javascript 6
I onclick non cambia l'immagine invece onmouseOver e Out si Javascript 9
K Script - onmouseover compaiono immagine e testo Javascript 15
elilabruja onmouseover in php PHP 9
E [JAVA] modificare Script per evento onmouseover Javascript 0
T Aiuto effetto onmouseover immagine si allunga e compare testo Javascript 0
I onMouseOver su immagini Javascript 23
K testo ed img alternati con onmouseover Javascript 5
K onmouseover HTML e CSS 8
J OnMouseover Slideshow Javascript 0
T Onmouseover slideshow Javascript 3
K onmouseover in altro frame Javascript 2
D Problema onmouseover Javascript 0
Z png: OnMouseOver e UseMap Javascript 5
A onMouseOver Javascript 6
S Usare onmouseover con 'campo immagine' e non al tag <img> Javascript 3
D evento onmouseover Javascript 9
sbobby OnMouseOver HTML e CSS 3
H problemi con onmouseover e GetElementById Javascript 1
M OnMouseOver non funziona Javascript 1
purno Cambio immagine con onMouseOver: HTML e CSS 7
§ onmouseover finestrella Javascript 2
C Marquee verticale che si ferma onmouseover HTML e CSS 8
W OnMouseOver su una map area HTML e CSS 5
P Creare javascript onmouseout per menu Javascript 9
borgo italia option ed attributo onmouseout/over HTML e CSS 0
G pc desktop non si connette all'hotspot wifi Reti LAN e Wireless 0
A API Hotspot nativo android Sviluppo app per Android 0
P jquery lightbox su hotspot jQuery 1

Discussioni simili