È sconsigliato in quanto innovazione (l' :hover per tutti gli Elementi) di CSS supportata solo da alcuni e più recenti Browser.
Ed inoltre, diventa improbabile che la "Kjka" possa poter racchiudere entrambe in un DIV o TABLE senza inglobare altra roba (dovrebbero le immagini, trovarsi proprio una sopra l' altra).
Si può fare benissimo col JavaScript, contando che anche Browser di dieci anni fa lo interpretano.
Ti ho buttato giù un modellino piccino-picciò, ma eloquente:
codice:
<head>
<script>
function half(){
document.images["master"].style.opacity = 0.4;
document.images["navbtn"].style.opacity = 0.4;
document.images["master"].style.filter="alpha(opacity=40)";
document.images["navbtn"].style.filter="alpha(opacity=40)";
}
function full(){
document.images["master"].style.opacity = 1;
document.images["navbtn"].style.opacity = 1;
document.images["master"].style.filter="alpha(opacity=100)";
document.images["navbtn"].style.filter="alpha(opacity=100)";
}
</script>
</head>
<body>
<div align="center">
[img][/img]
</div>
<div align="left">
[img][/img]
</div>
</body>
Le sacre scritture per gestire l' opacità non sono standardizzatissime tra i Navigatori: sia in CSS che in JavaScript dobbiamo attenerci a diverse sintassi (= chiamano le cose in diverso modo).
Pe questo, la replica della seconda coppia di righe, con filter="alpha(opacity=valore)"; si rende necessaria per averlo funzionante con InternetExplorer.