Far comparire un div al passaggio del mouse

**miki92** · 27-07-2008, 19.18.23

Salve a tutti,
oggi avrei bisogno di far comparire un div con attributo display:none quando il mouse passa su un link ed ho fatto cosi:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ciao CIAO SONO UN DIV NASCOSTO</title>
<script type="text/javascript">
function Vedi(){
document.getElementById("01").style.display = 'block';
}
function Nascondi(){
document.getElementById("01").style.display = 'none';
}
</script>
</head>

<body>
<a href="#" onmouseover="Vedi()" onmouseout="Nascondi()">Ciao</a>
<div id="01" style="display:none">CIAO SONO UN DIV NASCOSTO</div>
</body>

</html>

Fin qui tutto bene. Ora ho più div naturalmente ognuno con attributi diversi, ora al posto di creare diversi Vedi(), Vedi1() che farebbero vedere i diversi div vorrei che una sola funziona a seconda di una variabile mi mostrasse il div con quell'id, per fare ciò ho provato cosi:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ciao CIAO SONO UN DIV NASCOSTO</title>
<script type="text/javascript">
function Vedi(quale){
document.getElementById(+quale+).style.display = 'block';
}
function Nascondi(){
document.getElementById("01").style.display = 'none';
}
</script>
</head>

<body>
<a href="#" onmouseover="Vedi(01)" onmouseout="Nascondi()">Ciao</a>
<div id="01" style="display:none">CIAO SONO UN DIV NASCOSTO</div>
</body>

</html>

Ma purtroppo non funziona...dove sbaglio?

27-07-2008, 19.19.26

Codice HTML:

<a href="#" onmouseover="Vedi('01')" onmouseout="Nascondi()">Ciao</a>

prova così ;)

**miki92** · 27-07-2008, 19.29.52

No mi dispiace, lo stesso non funziona. Il problema sembrerebbe questo:

Codice HTML:

document.getElementById(+quale+).style.display = 'block';

**dreadnaut** · 27-07-2008, 19.53.14

non sono certo se un id (o un class) possano cominciare con un numero, quindi conviene usare "idnn". La correzione suggerità da comunitàvirtuali sopra è necessaria, per quanto riguarda +quale+, quella cosa non è javascript, da dove hai preso ispirazione?

Codice PHP:


<script type="text/javascript">
function Vedi(quale) {
  document.getElementById(quale).style.display = 'block';
}
function Nascondi(quale) {
  document.getElementById(quale).style.display = 'none';
}
</script>

</head><body>

<a href="#" onmouseover="Vedi('id01')" onmouseout="Nascondi('id01')">Ciao</a>
<div id="id01" style="display:none">CIAO SONO UN DIV NASCOSTO</div>

nota che in questo modo se il javascript è disattivato ti ritrovi con i div invisibili, ed una serie di link inutili. Sarebbe più saggio lasciarli visibili, e poi nasconderli a caricamento completato con una serie di chiamate a Nascondi(...). Soluzione perfetta sarebbe creare anche i link per mostrare i div solo a caricamento completato, prendendo esempio dal javascript di supporto.

**miki92** · 27-07-2008, 19.59.28

Grazie dreadnaut, il codice funziona. Comunque ti ringrazio anche dell'accorgimento sugli utenti con javascript disattivato. Il problema è che se faccio come dici tu chi ha javascript disattivato non vedrebbe nulla per alcuni motivi; il tutto risolverò con un tag <noscript></noscript> prima di chiudere il body non credi?

Discussione: Far comparire un div al passaggio del mouse

LinkBack

Strumenti discussione

Display

Far comparire un div al passaggio del mouse

Regole di scrittura