Foros del Web » Creando para Internet » CSS »

Javascript - Opacity - CSS

Estas en el tema de Javascript - Opacity - CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/12/2010, 16:33
 
Fecha de Ingreso: noviembre-2008
Ubicación: Mexico
Mensajes: 2
Antigüedad: 9 años
Puntos: 0
Pregunta Javascript - Opacity - CSS

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> 
  #2 (permalink)  
Antiguo 10/12/2010, 21:43
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Javascript - Opacity - CSS

Cita:
Iniciado por floresrosales Ver Mensaje
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!
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 12/12/2010, 16:53
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Javascript - Opacity - CSS

Cita:
Iniciado por GAST0N Ver Mensaje
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 original
  1. filter:  alpha(opacity=50);

Etiquetas: html, javascript, opacity
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 02:08.