Firefox e z-index

[ivan cb6]

Ciao ho un problema di questo tipo

Ho realizzato un serie di link che al passaggio del mouse mostrano dei div sovrapposti i quali contengono testo con dei link a delle pagine.

Il problema è che i div vengono visualizzati correttamente, i testi sono visualizzati correttamente il problema è che i link non sono attivi.
Se ad esempio assegno ad un div Z-index:1 e all'latro z-index:2 tutto si visualizza correttamente però i link del div con Z-index:1 non sono più cliccabili.

Quindi pensavo di asegnare z-index tramite javascript, è possibile?...oppure avete qualche altra idea?

Ciao e grazie

[H5N1_Aviaria]

Un link al sito o un po' di codice potrebbero essere esemplificativi.

[azz00]

<script type="text/javascript">
function assegnaZ(id){
var selectDiv = document.getElementById("myDiv").style.zIndex=i;
}
</script>

<div id="myDiv" onmouseover="assegnaZ('myDiv')"></div>

cosi dovrebbe andare!
ricorda che lo script javascript va nel tag head

[Mich_]

Originariamente inviato da ivan cb6
Ciao ho un problema di questo tipo

Ho realizzato un serie di link che al passaggio del mouse mostrano dei div sovrapposti i quali contengono testo con dei link a delle pagine.

Il problema è che i div vengono visualizzati correttamente, i testi sono visualizzati correttamente il problema è che i link non sono attivi.
Se ad esempio assegno ad un div Z-index:1 e all'latro z-index:2 tutto si visualizza correttamente però i link del div con Z-index:1 non sono più cliccabili.

Quindi pensavo di asegnare z-index tramite javascript, è possibile?...oppure avete qualche altra idea?

Ciao e grazie

Se vuoi fare tramite JS, ti sposto nel forum corretto.

Ma sono convinto che la stessa cosa si possa risolvere anche senza JS, con i soli CSS.
In pratica hai una serie di blocchi, che occupano la stessa posizione, ed una serie di link sempre visibili. E` una situazione simile (uguale?) ad un menu a tab. Per cui trovi soluzioni gia` pronte nelle raccolte di menu.
Ma perche` vuoi "giocare" con gli z-index? Credo che ti convenga usare
display: block;
display: none;

Codice HTML (bozza):
link1<div>blocco1</div>
link2<div>blocco2</div>
...
CSS:

a div {
  position: absolute;
  top: ...;
  left: ...;
  width: ...;
  height: ...;
  display: none;
}
a:hover div {
  display: block;
}

[ivan cb6]

Non ho provato con display:block e dysplay: none ma proverò.

Comunque per ora ho risolto con javascript quindi chiedo scusa se ho postato nella sezione sbagliata.
In pratica ho fatto in questo modo (non sono un campione con javascript )

Questi sono due link

Mostra 1
Mostra 2

function mostra(div){
div1.style.zIndex=1;
div1.style.zIndex=1;
if (div=='div1'){
div1.style.zIndex=2;
div1.style.visibility='visible';
if (div=='div2'){
div2.style.zIndex=2;
div2.style.visibility='visible';

E' molto spartano anzi se lo potete semplificare

Ciao e grazie

[Mich_]

Molto spartano e molto "proprietario: (nel senso che non funziona in tutti i browser).
Ecco un esempio di codice che funziona dappertutto (e puo` servire per un numero vario di blocchi):

var elenco = newArray("div1", "div2"); // tutti i blocchi che possono essere scelti
function mostra(div){
  for (var dd in elenco) {
    document.getElementById(dd).style.zIndex = (dd==div) ? 10 : 1;
  }
}

Visto che usi lo z-index e che viene comunque settato (a 10 oppure 1), non serve modificare altro.

la stessa cosa la ottieni con il display, sostituendo la riga con:
document.getElementById(dd).style.display = (dd==div) ? 'block' : 'none';

Pero` ribadisco che la stessa cosa la ottieni con il CSS, senza l'uso di JS intrusivo (cioe` che impedisce il funzionamento della pagina quando JS e` disabilitato).

[azz00]

non vorrei dire ma con ie6 a:hover non funziona! quindi cmq la compatibilità non è garantita

[Ocerusico]

Scusate se mi intrometto ma cercando mi sono imbattuto in questa discussione.
Sto cercando di realizzare qualcosa di simile, usando solo i css come dice mich, e copiando dall'esempio che ha riportato. Il div compare, ma i link al suo interno non funzionano, o meglio non sono raggiungibili, in quanto scompaiono non appena ci si sposta dal link principale...
Ho guardato anche l'articolo sui Tootltip CSS, ma non ne vengo a capo...
Ciao a tutti!!!

[Mich_]

Certo che non funzionano i link: tutto il blocco sta dentro un link (se hai usatoil codice che avevo suggerito io).
Comunque i menu a vari livelli sono realizzati con tecniche simili e li` i link funzionano.
Prova a cercare nelle varie raccolte di menu (puoi partire dai "link utili" del forum).