Foros del Web » Creando para Internet » CSS »

A vueltas con la compatibilidad

Estas en el tema de A vueltas con la compatibilidad en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/11/2005, 05:53
Avatar de Pandragon  
Fecha de Ingreso: abril-2003
Ubicación: Alicante - España
Mensajes: 66
Antigüedad: 14 años, 7 meses
Puntos: 0
A vueltas con la compatibilidad

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?
  #2 (permalink)  
Antiguo 17/11/2005, 21:03
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
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á.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #3 (permalink)  
Antiguo 17/11/2005, 21:53
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Creo q JavierB ya respondió lo de Opera.. busca por el foro.
  #4 (permalink)  
Antiguo 19/11/2005, 08:59
Avatar de Pandragon  
Fecha de Ingreso: abril-2003
Ubicación: Alicante - España
Mensajes: 66
Antigüedad: 14 años, 7 meses
Puntos: 0
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.
  #5 (permalink)  
Antiguo 19/11/2005, 11:55
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
  #6 (permalink)  
Antiguo 09/12/2005, 12:31
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:55.