-
tabella appare-scompare
Salve:
In effetti questa volta il tiolo non è molto chiaro (non sapevo cosa scrivere:lol:)...
Volevo fare un semplicissimo script che quando si passa con il mouse (onMouseOver) in una immagine appare una tabella e, quando non si ha il puntatore sopra l'immagine (onMouseOut) la tabella sparisca!
...In pratica la tabella appare solo se si ha il puntatore sull'immagine!
Allora ho scritto questo:
Codice HTML:
<html>
<head>
<title>
prova
</title>
<style type="text/css">
<!--
#tabella {
visibility : hidden;
}
-->
</style>
</head>
<body>
<img src="a.jpg" onMouseOver="mostra()"; OnMouseOut="togli()";>
<script language="Javascript">
functon mostra()
{
document.getElementById('tabella').visibility = "visible";
}
function togli()
{
document.getElementById('tabella').visibility = "hidden";
}
</script>
<div id='tabella'><table border="2"><tr><td>ciao!</td></tr></table></div>
</body>
</html>
Solo che quando passo sopra con il mouse, IE mi da errore nella 15° riga... :incavolat
Dove sbaglio??
Grazie!
CIAO!
-
Ti posso dire che ci sono già due errori in questa riga:
Codice HTML:
<img src="a.jpg" onMouseOver="mostra()"; OnMouseOut="togli()";>
non dovrebbe essere così?
Codice HTML:
<img src="a.jpg" onMouseOver="mostra();" OnMouseOut="togli();">
-
Non funziona :crycry:
Grazie comunque...!
CIAO!
edit:
IE dice che c'é un errore nella 15° riga, primo carattere e dice: "errore: Previsto oggetto".
-
Mi ricordo che ho aperto una discussione simile a questa vedi se può esserti utile:
http://forum.it.altervista.org/basi-...-e-banner.html
Saluti!
EDIT:
Codice HTML:
<html>
<head>
<title>Prova</title>
<script type="text/javascript">
function mostra() {
document.getElementById('tabella').style.display='block';
}
function nascondi() {
document.getElementById('tabella').style.display='none';
}
</script>
<style type="text/css">
#tabella {display: none;}
</style>
</head>
<body>
<img src="a.jpg" onmouseover="mostra();" onmouseout="nascondi();" />
<table id="tabella" border="2"><tr><td>Ciao</td></tr></table>
</body>
</html>
Così dovrebbe andare bene :wink:
-
c'è anche un errore a riga 17
hai scritto functon invece di function
ciao ciao
edit:
visibility è un sotto elemento css quindi prima va posto style
es
document.getElementById('tabella').style.visibilit y='visible';
ciao ciao
-
Grazie A Tutti!
...secondo voi è meglio usare visibility o display ??
-
non per essere contrario a nokiagames ma usando visibilty in css mi trovo piu comodo con esso che con display
poi scegli tu quello che preferisci, non credo che faccia differenza
ciao ciao
-
..basta che funziona :lol:... se di compatibilità è uguale... .
Ma (visto che vorrei fare un menù a scomparsa {voglio farlo *da solo}), ho fatto così:
Codice HTML:
<html>
<head>
<title>
prova
</title>
<style type="text/css">
<!--
#tabella {
visibility : hidden;
}
-->
</style>
</head>
<body>
<img src="a.jpg" onMouseOver="mostra();" OnMouseOut="aspettatogli();">
<script language="Javascript">
function mostra()
{
document.getElementById('tabella').style.visibility = "visible";
}
function togli()
{
document.getElementById('tabella').style.visibility = "hidden";
}
function aspettatogli()
{
setTimeOut("togli()",1000);
}
</script>
<div id='tabella'><table border="2" onMouseOver="mostra();" OnMouseOut="aspettatogli();" ><tr><td>ciao!</td></tr></table></div>
</body>
</html>
...In pratica, prima di passare alla funzione togli, faccio aspettare un attimo (PURTROPPO SLEEP() NON ESISTE IN JS:crycry:). Ho aggiunto poi il onMouseOver e OnMouseOut anche alla tabella.
Ma durante onMouseOut c'è un errore e non mi toglie la tabella.
*da solo intendo non utilizzare un codice già fatto: il mio scopo non è quello di fare un sito chissà come, ma, per adesso, VOGLIO SOLTANTO IMPARARE :lol:
GRAZIE!
CIAO!
-
questo errore è davvero piccolo:
hai scritto male setTimeOut, sostituiscilo con setTimeout
ciao ciao
-
Grazie mille!!
Comunque una cosa:
Ho aggiunto onMouseOver e onMouseOut anche alla tabella, ma non funzionano :crycry:
...e poi se faccio veloce, non aspetta a togliere la tabella (la fa scomparire subito {ma solo se si fa veloce...})...
Grazie!
CIAO!
-
scusa ma non ho capito cosa vuoi fare. puoi spiegarti meglio?
-
Ho questa immagine.
Se vado sopra con il mouse, appare la tabella.
In teoria, la tabella dovrebbe contenere dei collegamenti o non so (un menù).
Quindi, prima di scomparire, deve aspettare un attimo che il puntatore vada dalla immagine alla tabella (c'è un poccolo spazio).
Quando il puntatore è nella tabella, lei dovrebbe restare perchè è il menù!
mi sono spiegato??
..prova a fare una pagina con quel codice e, invece di "ciao" immagina dei link....
grazie,
CIAO!
-
in teoria il codice è giusto (secondo me) pero devi capire che io di js non ne capisco una mazza (sono arrivato ad aiutarti fino a qua solo con il ragionamento e google)
quindi non saprei dove sbagli. scusa ma qui io non so piu andare avanti aspettiamo il parere di uno piu esperto
ciao e scusa se non so aiutarti
-
OK, grazie!!
Comunque ho notato una cosa:
OnMouseOver si attiva anche se resto sopra con il mouse nella immagine!!
Cioè: vado con il puntatore sulla immagine. SE CI RESTO, comunque dopo di un secondo la tabella scompare !!!
Ecco perché scompare anche se sto sopra la tabella!!
Boh?? In teoria anche secondo me dovrebbe funzionare!! OnMouseOver si dovrebbe attivare SOLO quando il mouse esce !!
####
Ho risolto il problema che se resto sopra l'immagine, la tabella non sparisce: gli ho tolto onMouseOver dalla immagine:lol:... Comunque se resto sulla tabella, OnMouseOver NON SI DOVREBBE ATTIVARE :incavolat... Boh...
Codice (fino adesso :lol:)
Codice HTML:
<html>
<head>
<title>
prova
</title>
<style type="text/css">
<!--
#tabella {
visibility : hidden;
}
-->
</style>
</head>
<body>
<img src="a.jpg" onMouseOver="mostra();">
<script language="Javascript">
function mostra()
{
document.getElementById('tabella').style.visibility = "visible";
}
function togli()
{
document.getElementById('tabella').style.visibility = "hidden";
}
function aspettatogli()
{
setTimeout("togli()",1000);
}
</script>
<div id='tabella'><table border="2" onMouseOver="mostra();" OnMouseOut="aspettatogli();" ><tr><td>ciao!</td></tr></table></div>
</body>
</html>
Grazie!!
CIAO!
EDIT:
Ho pensato che il onMouseOver="mostra();" della tabella dava fastidio (ed è anche inutile)... Quindi l'ho tolto ma non funziona uguale!
