10/12/2010, 21:43
|
 | | | Fecha de Ingreso: agosto-2010 Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 3 meses Puntos: 64 | |
| Respuesta: Javascript - Opacity - CSS
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! |