Javascript - Opacity - CSS

floresrosales · #1 (**permalink**) 10/12/2010, 16:33

Que tal estimados programadores,
Tengo un rato queriendo solucionar este problema:

Voy a realizar una tienda virtual, en la cual necesito que al posicionarse el mouse sobre ella se ilimine la imagen (de inicio la imagen tendrá un opacity de 0.4) y que además se super ponga a la imagen un div con algun contenido (que de inicio tendrá una opacidad de 0).
Para esto desarrolle un pequeño script que me funciona correctamente en IE pero en Firefox no.

Alguien tendrá alguna sugerencia?

Código HTML:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript">

function mostrar(id, idd)
{
	id.style.MozOpacity = 0.9;
	id.filters.alpha.opacity=100;
	
	var div = document.getElementById(idd);
	div.style.opacity = '0.9';
	div.filters.alpha.opacity=100;
	

}

function ocultar(id, idd){
	
	id.style.MozOpacity = 0.4;
	id.filters.alpha.opacity=40;
	
	var div = document.getElementById(idd);
	div.style.opacity = '0';
	div.filters.alpha.opacity=0;
	
	
}

</script>


</head>

<body>
<table cellpadding="0" cellspacing="0">
	<tr>
    <td>
<img src="pieza4.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="javascript:mostrar(this, 'bloque');"
onmouseout="javascript:ocultar(this, 'bloque');" />

<div style="background:#CC3; height:30px; width:400px; position:absolute; top:5px; opacity:0; filter:alpha(opacity=0);" id="bloque">Texto, texto, texto</div>
	</td>
	</tr>
</table>
</body>
</html>

GAST0N · #2 (**permalink**) 10/12/2010, 21:43

Cita:

Iniciado por floresrosales

Que tal estimados programadores,
Tengo un rato queriendo solucionar este problema:

Voy a realizar una tienda virtual, en la cual necesito que al posicionarse el mouse sobre ella se ilimine la imagen (de inicio la imagen tendrá un opacity de 0.4) y que además se super ponga a la imagen un div con algun contenido (que de inicio tendrá una opacidad de 0).
Para esto desarrolle un pequeño script que me funciona correctamente en IE pero en Firefox no.

Alguien tendrá alguna sugerencia?

Código HTML:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript">

function mostrar(id, idd)
{
	id.style.MozOpacity = 0.9;
	id.filters.alpha.opacity=100;
	
	var div = document.getElementById(idd);
	div.style.opacity = '0.9';
	div.filters.alpha.opacity=100;
	

}

function ocultar(id, idd){
	
	id.style.MozOpacity = 0.4;
	id.filters.alpha.opacity=40;
	
	var div = document.getElementById(idd);
	div.style.opacity = '0';
	div.filters.alpha.opacity=0;
	
	
}

</script>


</head>

<body>
<table cellpadding="0" cellspacing="0">
	<tr>
    <td>
<img src="pieza4.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="javascript:mostrar(this, 'bloque');"
onmouseout="javascript:ocultar(this, 'bloque');" />

<div style="background:#CC3; height:30px; width:400px; position:absolute; top:5px; opacity:0; filter:alpha(opacity=0);" id="bloque">Texto, texto, texto</div>
	</td>
	</tr>
</table>
</body>
</html>

Opacity no funciona en IE , mejor usa display: block para que aparesca y display:none para que desaparesca...

saludos!

bex · #3 (**permalink**) 12/12/2010, 16:53

Cita:

Iniciado por GAST0N

Opacity no funciona en IE , mejor usa display: block para que aparesca y display:none para que desaparesca...

Totalmente de acuerdo, porque además el opacity hace que no se vea el elemento pero no lo hace desaparecer. Uno no puede acceder a los elementos que estén por debajo del elemento con opacidad 0. Por otro lado, para que la opacidad funcione en IE tenés que usar un filtro específico para ese navegador:

Código CSS:

Ver originalfilter:  alpha(opacity=50);