Foros del Web » Programando para Internet » Javascript »

duda efecto fade

Estas en el tema de duda efecto fade en el foro de Javascript en Foros del Web. Hola tengo un problemilla... encontre en vuestro foro un tema donde se perfilava el un código para hacer el efecto fade en una tabla , ...
  #1 (permalink)  
Antiguo 28/02/2010, 09:05
 
Fecha de Ingreso: octubre-2007
Mensajes: 724
Antigüedad: 16 años, 7 meses
Puntos: 4
duda efecto fade

Hola tengo un problemilla...

encontre en vuestro foro un tema donde se perfilava el un código para hacer el efecto fade en una tabla , lo que hace es inicial color fondo blanco y texto negro y al onmause hace efecto face oscureciendo el fondo a color negro, mi pregunta es como se podria hacer para que inicialmente haya una imagen de background y al hacer onmouseover aparezca otra imagen con efecto fade como el del siguiente script...

es possible hacer el efecto fade con imagenes ??? alguna sugerencia ???

Código:
<html> 
<head> 
<style> 
td{font:normal 10px/10px verdana; 
padding:20px 20px 20px 20px; 
border:solid 1px black; 
} 

</style> 

<script> 

//--------VARIABLES MODIFICABLES---------------- 
maximo=255; 
minimo=0; 
incrementor=2; 
modificar="fondo" //"texto" o "fondo" 
//---------------------------------------------- 


r=maximo; 
g=maximo; 
b=maximo; 
switch(modificar){ 
case "texto": 
loQueSeModifica="color"; 
invertido="maximo-"; 
break; 
case "fondo": 
invertido=""; 
loQueSeModifica="backgroundColor"; 
break; 
} 

function iluminar(esto,variacion){ 
incremento=variacion*incrementor; 
eval('esto.style.'+loQueSeModifica+'="RGB("+('+invertido+'r)+","+('+invertido+'g)+","+('+invertido+'b)+")"'); 
r+=incremento;b+=incremento;g+=incremento; 
eso=esto; 
elincremento=variacion; 
if(r>minimo && r<maximo){seguir=window.setTimeout("iluminar(eso,elincremento)",10);} 
else{r-=incremento;g-=incremento;b-=incremento;} 


} 
</script> 
</head> 

<body> 

<table> 
<tr> 
<td  onmouseout="iluminar(this,1)" onmouseover="iluminar(this,-1)" >Hola que tal estamos!! 
</td></tr> 
</table> 

</body> 
</html>

Si no es posible hacer el efecto fade con background-image quería hacer que el efecto fade lo haga y vuelva otra vez a la normalidad con efecto fade otra vez. Es posible ???

Última edición por jonysi_d; 28/02/2010 a las 09:24
  #2 (permalink)  
Antiguo 28/02/2010, 09:17
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 15 años, 5 meses
Puntos: 6
Respuesta: duda efecto fade

Buenas,

Podrías hacer la imagen transparente (o semitransparente). De este modo, al variarte el color de fondo, daría el pego de estar oscureciendo o aclarando la imagen.

P.D.: Después de 566 mensajes, podrías aprender a resaltar el código ya que así no hay quien lo lea!

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #3 (permalink)  
Antiguo 28/02/2010, 09:22
 
Fecha de Ingreso: octubre-2007
Mensajes: 724
Antigüedad: 16 años, 7 meses
Puntos: 4
Respuesta: duda efecto fade

El problema es que no se mucho de JavaScript y no se como programar para que al hacer el onmauseover aparezca el background-image. Soy novato en JavaScript.

Perdón por lo del código.
  #4 (permalink)  
Antiguo 28/02/2010, 09:26
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 15 años, 5 meses
Puntos: 6
Respuesta: duda efecto fade

Yo lo he probado así y funciona:

Código HTML:
<img src="imagen.png" alt="IMAGEN" onMouseOut="iluminar(this,1)" onMouseOver="iluminar(this,-1)"/> 
El mismo código que tenias pero quitando los eventos 'onMouseOut' y 'onMouseOver' del 'td' y poniéndoselos al 'img'.

Pero esta imagen que yo tengo es transparente. Para que te quede un bonito efecto, deberías usa una imagen semitransparente.

Saludos.
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #5 (permalink)  
Antiguo 28/02/2010, 09:39
 
Fecha de Ingreso: octubre-2007
Mensajes: 724
Antigüedad: 16 años, 7 meses
Puntos: 4
Respuesta: duda efecto fade

Muchas gracias, pero asi lo que hago es que siempre se visualiza la imagen, yo quiero que la imagen cambien, es decir, cuando NO hay onmauseover que haya una imagen y cuando SI haya onmauseover aparezca otra imagen distinta a la otra.

Quiero hacer algo parecido a esto, pero sin usar Flash:

http://www.epsiloneuskadi.com/epsilo...spx?language=1
  #6 (permalink)  
Antiguo 28/02/2010, 09:46
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 15 años, 5 meses
Puntos: 6
Respuesta: duda efecto fade

Entonces pide las cosas por su nombre. Lo que quieres no es un efecto Fade sino un Rollover...

Mírate este post. Hacia el final pongo un código para hacer lo que quieres.

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #7 (permalink)  
Antiguo 28/02/2010, 10:18
 
Fecha de Ingreso: octubre-2007
Mensajes: 724
Antigüedad: 16 años, 7 meses
Puntos: 4
Respuesta: duda efecto fade

genuine es genial el post, me ira fantasticamente, pero como hacer el efecto fade ??? es decir, si no estoy equivocado ( corrígeme si estoy equivocado ) el efecto fade es el efecto de desenfocado o mejor dicho que degrada el color o la imagen poco a poco, es posible hacerlo con imagenes... mediante tu script ( que es muy util para mi ):

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Ejemplo rollover</title>
<script type="text/javascript">
<!--
    var rollover = false;
    
    function changeImg( img ) {
        if( rollover ) {
            if( img == 'original' ) document.getElementById( 'imagenRollover' ).src = oldimage.src;
            else document.getElementById( 'imagenRollover' ).src = newimage.src;
        }
    }
    
    //Precarga de imagenes
    var oldimage = new Image();
    oldimage.src = 'imagenes/01g.gif';
    var newimage = new Image();
    newimage.src = 'imagenes/02g.gif';
-->
</script>
</head>
 
<body onload="rollover=true">
<img src="imagenes/01g.gif" alt="IMAGEN" onmouseover="changeImg()" onmouseout="changeImg( 'original' )" id="imagenRollover" />
</body>
</html>
  #8 (permalink)  
Antiguo 28/02/2010, 13:23
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 15 años, 5 meses
Puntos: 6
Respuesta: duda efecto fade

Carai! Ahora me he enterado de lo que querías, me ha costado...

He buscado un poco en internet y he encontrado esto: http://slayeroffice.com/code/imageCrossFade/xfade2.html

A ver si te sirve...

P.D.: No te sirve ninguno de los códigos anteriores. El tuyo solo hace fade y el mio, solo hace rollover...

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #9 (permalink)  
Antiguo 28/02/2010, 15:39
 
Fecha de Ingreso: octubre-2007
Mensajes: 724
Antigüedad: 16 años, 7 meses
Puntos: 4
Respuesta: duda efecto fade

Gracias por tu búsqueda, pero lo que hay en la web es un pase de fotos, pero yo quiero que al pasar el ratón por encima de una imagen cambie a otra, pero al hacer el cambio de imagen haga el efecto fade...

Quizás no me explique bien... disculpa
  #10 (permalink)  
Antiguo 28/02/2010, 17:12
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 15 años, 5 meses
Puntos: 6
Respuesta: duda efecto fade

Hay un pase de fotos, si, pero, en esencia, es el efecto que tu quieres, es decir, que al pasar el ratón por encima, haga ese 'pase de fotos'. Intenta analizar un poco el código que te pasé para hacerlo funcionar como tu quieres...

Por ejemplo, 'setTimeout(so_xfade,1000);' es el disparador que dice que cada 1000 milisegundos realice el 'pase de foto'. Pues tu quita esta linea y en 'onmouseover', pon 'so_xfade' y en 'onmouseout' también. Luego, ajusta el número de imágenes a 2 y ya tienes el efecto echo!

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM

Etiquetas: efecto, fade
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 18:46.