Como estoy de buenas aprovecho para dejar un ejemplo.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script>
function opacidadIn(ID){
document.getElementById(ID).getElementsByTagName("div")[0].style.visibility = 'hidden';
}
function opacidadOut(ID){
document.getElementById(ID).getElementsByTagName("div")[0].style.visibility = 'visible';
}
</script>
<style>
body{background-color:#000000; color:#ffffff; }
#im0{width:207px; height:108px; background: url('http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif') transparent; border:none; }
#im1{background:url('http://www.forosdelweb.com/images/rating/rating_5.gif') transparent; width:180px; height:48px; border:none; }
#im2{background:url('http://www.forosdelweb.com/images/buttons/reply.gif') silver; width:110px; height:26px; border:none; }
#im3{background:url('http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif') silver; width:207px; height:108px; border:none; }
.tapa{background:url('http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif') transparent; width:100%; height:100%; }
.tapamarmol{background:url('http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif') transparent; width:207px; height:108px; }
.fondo{background:url('http://img43.imageshack.us/img43/9528/marmol2in.gif') black; text-align:-moz-center; _text-align:center; }
.muestra{border:2px solid #ffff00; }
</style>
</head>
<body>
<h2>Ejemplo.</h2>
<div id="im0" onmouseover="opacidadIn(this.id)" onmouseout="opacidadOut(this.id)">
<div class="tapa"></div>
</div>
<br /><br />
<div id="im1" onmouseover="opacidadIn(this.id)" onmouseout="opacidadOut(this.id)" >
<div class="tapa"></div>
</div>
<div id="im2" onmouseover="opacidadIn(this.id)" onmouseout="opacidadOut(this.id)" >
<div class="tapa"></div>
</div>
<br /><br />
<div class="fondo"><div id="im3" onmouseover="opacidadIn(this.id)" onmouseout="opacidadOut(this.id)" >
<div class="tapamarmol"></div></div>
</div>
<h2>Imágenes.</h2>
<img class="muestra" src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" />
<img class="muestra" src="http://www.forosdelweb.com/images/rating/rating_5.gif" />
<img class="muestra" src="http://www.forosdelweb.com/images/buttons/reply.gif" />
<img class="muestra" src="http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif" />
<img class="muestra" src="http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif" />
<img class="muestra" src="http://img43.imageshack.us/img43/9528/marmol2in.gif" />
</body>
</html>
Y estos son los ejemplos de imagen.
El código podría mejorarse usando nodos, pero hay un problema de interpretación en algunos navegadores. Bah, la verdad verdadera es que yo no sé cómo usarlos.
No lo probé en el
Opera porque no tengo ninguno a mano, aunque ya usé antes un escript parecido y recuerdo que anduvo. No sé lo de
transparent, pero supongo que lo entiende.
En fondos con imagen no se comporta muy bien. Es la principal desventaja con el CSS. Igual agregué un ejemplo. Hay un
hack allí para la alineación; no le hace al código pero habría que ver cómo se arregla para otros navegadores.
Cada "imagen" tiene su
id porque en realidad es un fondo, y hay que asignarlo con CSS junto con las medidas.