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>