Problema :hover per renderlo retrocompatibile

Rieccomi. Volevo fare l'effetto illuminazione sul pulsante. Il CSS funziona perfettamente. Il problema è che ovviamente in IE6 non funziona non essendo un link. Ho usato javascript in questo modo

Codice:

---

img src="6.jpg" border="2" class="bordo" onmouseover="this.className='bordo:hover';" onmouseout="this.className='bordo';" />

---

Ecco il mio proble:
senza il codice javascript tutto funziona benissimo
http://img187.imageshack.us/img187/9459/menu1fz5.jpghttp://img122.imageshack.us/img122/6655/menu2vk8.jpg Con javascript ecco il risultato: http://img187.imageshack.us/img187/6347/menu3ny0.jpg
Ma per quale motivo mi fa il bordo nero O_o, e in tutti browser che uso (IE7 FireFox )? Il CSS è chiaro

Codice:

---

.bordo {
        border-top-color: #C2A249;
        border-right-color: #C2A249;
        border-bottom-color: #C2A249;
        border-left-color: #C2A249;
        filter:alpha(opacity=70);
        -moz-opacity: 0.7;
        opacity: 0.7;
}
.bordo:hover {
        border-top-color: #ceb46e;
        border-right-color: #ceb46e;
        border-bottom-color: #ceb46e;
        border-left-color: #ceb46e;
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
}

---

Anche mettendo solo "border-color: #C2A249" e "border-color: #ceb46e;" il problema persiste :crycry:

Per prima cosa, non ho capito per quale motivo vuoi utilizzare javaScript, per ciò che vuoi fare è superfluo e porta solo a inutili problemi di compatibilità con i browser che non supportano javaScript o agli utenti che hanno disabilitato il supporto nelle impostazioni.
Per cui io toglierei direttamente questa frazione di codice:

Codice HTML:

---

onmouseover="this.className='bordo:hover';" onmouseout="this.className='bordo';"

---

Per quanto riguarda il problema, è logico, si verifica una sorta di "conflitto" tra la sottoclasse "hover" della classe bordo e javaScript.
Se vuoi proprio utilizzare quest'ultimo, ti basta cambiare il nome alla classe "bordo:hover" in,magari, "bordo_hover" (??).

Citazione:

---

Il problema è che ovviamente in IE6 non funziona non essendo un link.

---

Non credo dipenda dal tipo di elemento, ma dal fatto che utilizzi -moz-opacity, filter, opacity, ... per la trasparenza.

IE6,se non sbaglio, non offre supporto CSS3 :wink:

Per cui devi cercare qualche tecnica alternativa, come ad esempio l' inclusione di un foglio di stile diverso a seconda del browser in uso utilizzando tecniche di sniffing per il riconoscimento, ...

Anche questo potrebbe esserti utile.


Ciao!

grazie mille probid. Ho creato una classe apparte e adesso l'effetto lo fa anche IE6 =D , strano ma vero!
PS: troppo forte la tua firma :razz: