Trasparenza di immagini

[jumborex]

Ho trovato su un sito dedicato (tra gli altri) a CSS, una interessante possibilità di cui si parla anche qui, per far apparire trasparenti le immagini e (al passaggio del mouse) farle ritornare alla originale brillantezza:
http://www.w3schools.com/css/css_image_transparency.asp

La cosa che mi colpisce è che (parlando di css) i redattori del sito in questione presentino poi la soluzione con:

img.transparent {
    opacity:0.4;
    filter:alpha(opacity=40);

(si noti il doppio metodo css3 (per firefox) e filter:alpha per MSIE).
Poi per ottenere l'effetto di cambio opacità dicono di aggiungere in img i comandi:

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"

Mi domando e domando a voi, in verità come mai non funziona (e infatti non funziona) una soluzione del tipo:

img.transparent {
    opacity:0.4;
    filter:alpha(opacity=40);
img.transparent a{
    opacity:0.4;
    filter:alpha(opacity=40);
}
img.transparent a:hover{ 
    opacity:1.0;
    filter:alpha(opacity=100);
}

[dvjack]

xkè la regola:

img.transparent a{
    opacity:0.4;
    filter:alpha(opacity=40);
}

da te definita, stà ad indicare che il tag <a> contenuto nel tag <img> con classe transparent, abbia una trasparenza del canale alpha pari a 0.4.
Ma tu non puoi avere un tag <a> interno al tag <img>....
per rendere l'effetto totalmente css-based dovresti usare la pseudoclasse :hover direttamente sul tag img:

img.transparent {
    opacity:0.4;
    filter:alpha(opacity=40);}
img.transparent:hover {
    opacity:1.0;
    filter:alpha(opacity=100);}

xò IE 6 e precedenti nn lo riconoscerebbero.
Una soluzione possibile, anche se non elegante è invertire quello che volevi fare tu, cioè mettere l'imagine all'interno di un link (tag a) e poi impostare la modifica della trasparenza sulla pseudoclasse :hover del tag a, che è pienamente supportata da IE 6.
Praticamente cosi:

[img]...[/img]
// css
a.transparent img{
    opacity:0.4;
    filter:alpha(opacity=40);
}
a.transparent :hover img{ 
    opacity:1.0;
    filter:alpha(opacity=100);
}

[jumborex]

Molto bene: devo dire però che il metodo (chiarissimo) su img:

img.transparent {
    opacity:0.4;
    filter:alpha(opacity=40);}
img.transparent:hover {
    opacity:1.0;
    filter:alpha(opacity=100);}

Funziona perfettamente sia su IE 7, sia su Firefox.
Mentre quello che tu dici funzionante su IE 6, (link+img) su questi due browser che ho provato non funziona.
Non sapevo (mea culpa ) che hover potesse essere usato anche per le immagini. Se ne impara sempre una.

[fcaldera]

Su explorer 6 il supporto alla pseudoclasse :hover si limita ai soli link (<a>)

[dvjack]

Originariamente inviato da fcaldera
Su explorer 6 il supporto alla pseudoclasse :hover si limita ai soli link (<a>)

difatti è quello che intendevo, solo che mi son sbagliato a scrivere il codice css , c'è uno spazio di troppo. inoltre il link aggiunge un bordo blu, quindi bisogna aggiungere una regola.

[img]...[/img]
// css
a.transparent img{
    opacity:0.4;
    filter:alpha(opacity=40);
    border:0;
}
a.transparent:hover img{ 
    opacity:1.0;
    filter:alpha(opacity=100);
    border:0;
}

funzinante su IE 5.5 +, Firefox 2.x, opera 9.x. Provalo...

[jumborex]

Originariamente inviato da dvjack
[...] funzinante su IE 5.5 +, Firefox 2.x, opera 9.x. Provalo...

Proprio vero! Sei un grande! Ottimo risultato e grazie.