Aiuto su semplice menù

[TheAikon]

Salve ragazzi mi servirebbe realizzare, per chi conosce bene javascript, un semplice menù con delle immagini.

Mi spiego meglio:
Ho una barra orizzontale realizzata con una tabella del tipo:

<table>
 
  <tr>
     <td>[img]001.gif[/img]</td>
     <td>[img]002.gif[/img]</td>
     <td>[img]003.gif[/img]</td>
  </tr>
 
 
  <tr>
     <td>[img]001_1.gif[/img]</td>
     <td>[img]002_1.gif[/img]</td>
     <td>[img]003_1.gif[/img]</td>
  </tr>
  <tr>
     <td>[img]001_2.gif[/img]</td>
     <td>[img]002_2.gif[/img]</td>
     <td>[img]003_2.gif[/img]</td>
  </tr>
 
</table>

Quello che vorrei è passando il mouse sull'immagine 001.gif mi rende visibile le immagini 001_1.gif e 001_2.gif con la possibilità di poterle poi cliccare; e così anche per le immagini 002.gif e 003.gif.

Quindi visibile con onmouseover e non visibile (dopo 2/3 secondi) con onmouseout.

E fattibile la mia richiesta?
Spero di essere stato abbastanza chiaro.

Un grazie anticipato a tutti i partecipanti a questa discussione.


Aikon

[Mich_]

E` possibile.

E` un bell'esercizio per usare contemporaneamente i CSS e JS:

<table>
 
  <tr>
     <td>[img]001.gif[/img]</td>
     <td>[img]002.gif[/img]</td>
     <td>[img]003.gif[/img]</td>
  </tr>
 
 
  <tr>
     <td id="caso1_1" class="nasc">[img]001_1.gif[/img]</td>
     <td id="caso2_1" class="nasc">[img]002_1.gif[/img]</td>
     <td id="caso3_1" class="nasc">[img]003_1.gif[/img]</td>
  </tr>
  <tr>
     <td id="caso1_2" class="nasc">[img]001_2.gif[/img]</td>
     <td id="caso2_2" class="nasc">[img]002_2.gif[/img]</td>
     <td id="caso3_2" class="nasc">[img]003_2.gif[/img]</td>
  </tr>
 
</table>

Nella head della pagina ci dovranno essere un CSS ed uno script opportuni:

<script type="text/javascript">
function showc(n) {
  document.getElementById('caso'+n+'_1').display = 'inline';
  document.getElementById('caso'+n+'_2').display = 'inline';
}

function hidec(n) {
  document.getElementById('caso'+n+'_1').display = 'none';
  document.getElementById('caso'+n+'_2').display = 'none';
}
</script>

<style type="text/css">
td.nasc { display: none; }
</style>

Non l'ho provato, per cui non posso escludere errori di sintassi, ma dovrebbe funzionare.

Ciao
Michele

[TheAikon]

Ciao Michele ho inserito alla lettera il tuo esempio ma non mi funziona; in pratica quando carico la pagina non visualizzo i sub menu e fin qui tutto ok, ma poi quando passo il mouse sopra l'immagine non succede nulla.

Come mai?

Aikon

[Mich_]

Dai pochi elementi per una diagnosi.
Ci sono errori JS?
Hai abilitato la visualizzazione degli errori JS?

Prova comunque con questa modifica alla funzione showc(), e dimmi se ti visualizza l'alert (ho anche fattoun errore: ho dimenticato un pezzo - da aggiungere anche nell'altra funzione):

function showc(n) {
alert("entro in funz showc con parametro "+n);
document.getElementById('caso'+n+'_1').style.displ ay = 'inline';
document.getElementById('caso'+n+'_2').style.displ ay = 'inline';
}

Ciao
Michele

[TheAikon]

Ok Michele adesso l'onmouseover funziona, mentre non va l'onmouseout; in pratica anche quando levo il mouse da sopra l'immagine passano i 3 secondi ma il sub menù che è comparso non scompare.

Questa volta che sarà?

Grazie ancora Michele!!


Aikon

[TheAikon]

Come non detto Michele....c'era un errore di sintassi (mancava un uguale) adesso ho risolto e funziona tutto!!!

Grazie mille


Aikon

[TheAikon]

Un'ultima cosa Michele, come posso ovviare a tale inconveniete...ti spiego:
quando passo il mouse sull'immagine presente nell'ultima cella (la terza), mi apre il sub menù sotto la prima cella e non sotto la terza.



Aikon

[TheAikon]

...mi rispondo ancora da solo ho risolto attribuendo l'id e la classe direttamente all'immagine e non alla cella.


Aikon

[Mich_]

Hai gia` fatto tutto da solo.

Ciao e buon Natale
Michele