Foros del Web » Creando para Internet » HTML »

Como puedo conseguir este efecto de transparencia? Ayuda porfavor

Estas en el tema de Como puedo conseguir este efecto de transparencia? Ayuda porfavor en el foro de HTML en Foros del Web. Bueno, en mi web www.reikai.org/sonicworld puse un efecto de transparencia en los botones donde al pasar el cursor por encima se vuelve opaco el boton. ...
  #1 (permalink)  
Antiguo 15/11/2004, 09:47
 
Fecha de Ingreso: abril-2004
Mensajes: 16
Antigüedad: 13 años, 8 meses
Puntos: 0
Como puedo conseguir este efecto de transparencia? Ayuda porfavor

Bueno, en mi web www.reikai.org/sonicworld puse un efecto de transparencia en los botones donde al pasar el cursor por encima se vuelve opaco el boton. Sin embargo ni con mozilla ni opera, se me ve el efecto. Como puedo lograrlo?
He encontrado una web que tambien lo hace, y si se ve con mozilla y opera, es: www.tekken.vg

Sin embargo he copiado el codigo de esta ultima web, y ni bajandome el css y guardandolo en la misma carpeta, logro hacer yo luego el efecto

Alguien sabe cual es el codigo para que funcione en mozilla u opera, o si hace falta hacer algo mas? ayuda y gracias
  #2 (permalink)  
Antiguo 15/11/2004, 09:57
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
no pensaste en hacerlo en flash ?? con eso te liberas de los navegadores...

Saludos
__________________
Esteban Quintana
  #3 (permalink)  
Antiguo 15/11/2004, 10:02
 
Fecha de Ingreso: abril-2004
Mensajes: 16
Antigüedad: 13 años, 8 meses
Puntos: 0
Uf, no, es que hay dos problemas con flash, primero que a veces hace el tonto y no acaba de encajar bien la imagen, y otra que no se hacer animaciones en botones cuando quitas el boton de encima, solo cuando lo pasas, y en cambio con este efecto de web si que hay "animacion" por asi decirlo cuando lo quitas
  #4 (permalink)  
Antiguo 15/11/2004, 11:03
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
bueno, ok, acá te paso un código fuente de una tabla que tiene una celda transparente y se ve en ambos navegadores, ahora bien, usa el onmouseover y onmouseout para cambiar los porcentajes de la transparencia

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function opaco(){

if (document.all)
document.getElementById('celda').style.filter = "alpha(opacity: 30)";
else
document.getElementById('celda').style.MozOpacity = "0.3";
}
</script>
</head>

<body bgcolor="#ffffff" onLoad="opaco()">
<table width="75%" border="0" background="gaita.jpg">
  <tr> 
    <td rowspan="2" bgcolor="orange" id="celda"><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>klf jsjf slj &ntilde;lskfj &ntilde;laj &ntilde;lakfjk&ntilde;ljf sl</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
    <td bgcolor="orange">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="orange">sfsdfdsfafsdfaffafsdf</td>
  </tr>
</table>
</body>
</html>
Espero que te sirva

Saludos
__________________
Esteban Quintana
  #5 (permalink)  
Antiguo 15/11/2004, 11:47
 
Fecha de Ingreso: abril-2004
Mensajes: 16
Antigüedad: 13 años, 8 meses
Puntos: 0
Muchisimas gracias. Si no es mucho pedir, como funciona el codigo del onmouseover y out? Gracias de nuevo
  #6 (permalink)  
Antiguo 16/11/2004, 05:29
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
ok, ya le hice unas modificaciones y acá te lo mando con onmouse over y onmouseout, pero aunque parezca raro, me está funcionando perfectamente en netscape, pero en IE no...y no entiendo porque...por favor que alguno de los entendidos en javascript nos resuelva ese problema...

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function opacar(id,porcentaje){
if (document.all){
   document.getElementById(id).style.filter = "alpha(opacity: porcentaje)";
}
else {
   porcentaje = porcentaje/100;
   document.getElementById(id).style.MozOpacity = porcentaje;
}
}
</script>
</head>

<body bgcolor="#ffffff" onLoad="opacar('celda',70)">
<table width="75%" border="0" background="gaita.jpg">
  <tr> 
    <td rowspan="2" bgcolor="orange" id="celda" onMouseOver="opacar('celda',30)" onMouseOut="opacar('celda',70)"><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>klf jsjf slj &ntilde;lskfj &ntilde;laj &ntilde;lakfjk&ntilde;ljf sl</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
    <td bgcolor="orange">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="orange">sfsdfdsfafsdfaffafsdf</td>
  </tr>
</table>
</body>
</html>
Espero que te sirva. Saludos...
__________________
Esteban Quintana
  #7 (permalink)  
Antiguo 16/11/2004, 05:33
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
El problema seguramente está en esta línea de código

document.getElementById(id).style.filter = "alpha(opacity: porcentaje)";

en donde coloqueé una variable (porcentaje) en vez de colocar el número 30 o 70...Esa instrucción no soporta variables ???

Esa sería una muy mala noticia...
__________________
Esteban Quintana
  #8 (permalink)  
Antiguo 16/11/2004, 07:29
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
http://www.forosdelweb.com/f13/funcion-transparencia-247420/

Acá Caricatos me dieron la solución...

Saludos
__________________
Esteban Quintana
  #9 (permalink)  
Antiguo 16/11/2004, 09:34
 
Fecha de Ingreso: abril-2004
Mensajes: 16
Antigüedad: 13 años, 8 meses
Puntos: 0
mil gracias man
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 01:15.