A vueltas con la compatibilidad

Pandragon · #1 (**permalink**) 17/11/2005, 05:53

Con el fin de crear un efecto fade o de oscurecimiento de las imagenes mientras no se pase el raton por encima, dispongo del siguiente style:

Código:

<style>
.imgfade{filter:alpha(opacity=50); -moz-opacity:0.5;margin-left:3px}
.imgfull{filter:alpha(opacity=100); -moz-opacity:1;margin-left:3px} 
</style>

<img src="imagen" class="imgfade" onmouseover="this.className='imgfull'" onmouseout="this.className='imgfade'">

El problema es que este style únicamente funciona para Explorer y para Firefox y me gustaría que funcionase también en Opera.

¿Alguien podría decirme como hacerlo o donde tengo que mirar para averiguarlo?

KnowDemon · #2 (**permalink**) 17/11/2005, 21:03

Hola,

No sé como lograr lo que deseas con Opera PERO se que puedes utilizar opacity en vez de -moz-opacity. Dado que opacity es una recomendación de CSS3, si algún navegador decide soportar de manera prematura la regla (como los mozillas), ésta funcionará.

leoj90 · #3 (**permalink**) 17/11/2005, 21:53

Creo q JavierB ya respondió lo de Opera.. busca por el foro.

Pandragon · #4 (**permalink**) 19/11/2005, 08:59

Cita:

Iniciado por leoj90

Creo q JavierB ya respondió lo de Opera.. busca por el foro.

Busqué antes de hacer la pregunta, pero no encontré nada, no obstante volveré a intentarlo.

furoya · #5 (**permalink**) 19/11/2005, 11:55

Hola todos :

Pandragon : si la opacidad es de 50% o 0 puedes usar el recurso extremo de cubrir la imagen con un roll over de capa semitransparente, siempre que el fondo sea un color y no un mosaico.

Función "opacity"

No se ve bien, pero es mejor que nada.

furoya · #6 (**permalink**) 09/12/2005, 12:31

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> &nbsp; 
<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&aacute;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.