¿Rollover de imagen de blanco y negro a color, como se hace?

PSPforever · #1 (**permalink**) 18/12/2009, 14:03

Hola

Quiero hacer un rollover de Imagen en el que inicialmente se muestra en blanco y negro y al hacer "onmouseover" se muestre en color.

como puedo hacer esto?

saludos.gracias por anticipado

caricatos · #2 (**permalink**) 18/12/2009, 16:13

Hola:

Lo más sencillo es un rollover normal con las dos versiones de la imagen:

<img src="gris.jpg" onmouseover="this.style.display = 'none'; this.nextSibling.style.display = 'inline'"><img src="color.jpg" style="display: none" onmouseout="this.style.display = 'none'; this.previousSibling.style.display = 'inline'">

Saludos

Osdiwe · #3 (**permalink**) 18/12/2009, 16:51

Recomiendo usar CSS para el efecto de RollOver. Se utiliza una imagen que esté formada por los dos estados, se asigna a la propiedad background de un elemento y se juega con su posicion segun el estado.

Ejemplo:

#conimagen{
background-image:url('loquesea.jpg');
background-position: left top;
}

#conimagen:hover{
background-position:right top;
}

PSPforever · #4 (**permalink**) 19/12/2009, 04:28

Muchas gracias por vuestra ayuda.

Mar_Nube · #5 (**permalink**) 29/12/2009, 08:49

Yo tengo algo parecido pero para un boton en un formulario, por si te sirve

Código:

<input type="image" name="guardar" src="imagenes/guardar_off.gif" onmouseout="javascript:this.src='imagenes/guardar_off.gif'" onmouseover="javascript:this.src='imagenes/guardar_on.gif'" alt="Guardar" />

Impostor · #6 (**permalink**) 29/12/2009, 10:03

En la web de Mikmoro puedes ver el efecto realizado solo con css.

http://araudi.net/ejemplos/BN-Color.html

Saludos¡¡

PSPforever · #7 (**permalink**) 03/01/2010, 13:51

ok. gracias por vuestras respuestas, disculpad la tardanza.

Efectivamente, lo hice al final con CSS

Panino5001 · #8 (**permalink**) 03/01/2010, 15:33

Si todavía te interesa una solución javascript con una única imagen, quizá te sirva esto (está al revés, primero en color y luego en escala de grises, pero es fácilmente adaptable):

Código PHP:

  <!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=utf-8" />

<title>Documento sin título</title>

<script>

function toGrayScale(im){

    im.style.cursor='pointer';

    if(document.createElement("canvas").getContext){

        if(im.gs){

            im.src=im.gs;

            return;

        }

        var ref = document.createElement("canvas");

        ref.width = im.width || im.offsetWidth;

        ref.height =im.height  || im.offsetHeight;

        var context = ref.getContext("2d");

        context.drawImage(im,0,0);

        var iData=context.getImageData(0,0,  ref.width, ref.height);

        var data   = iData.data;

        var length = data.length;

          for (var i = 0;i<length;i+=4) {

            var average = (data[i]+data[i+1]+data[i+2])/3;

              data[i]   = average;

              data[i+1] = average;

              data[i+2] = average;

            

          }

          context.putImageData(iData, 0, 0);

          im.src=im.gs=ref.toDataURL();

    }else{

        im.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

    }

    

}

</script> 

</head>

 
<body>

<img onmouseout="this.src='tigre2.jpg';this.style.filter=''" onmouseover="toGrayScale(this)" src="tigre2.jpg" width="550" height="413" />

</body>

</html>

Aquí un ejemplo: http://www.disegnocentell.com.ar/eje...S/rollgray.php

dmza · #9 (**permalink**) 01/02/2011, 08:30

Panino5001.
Andaba buscando realizar esto y me sería de mucha ayuda realizar el efecto contrario, no soy programador y probé cambiando la sintaxis de "onmouseout por onmouseover" y no me resultó. Cualquier ayuda sería muy util.
Gracias de antemano.

Panino5001 · #10 (**permalink**) 01/02/2011, 09:21

Probá así (no está muy optimizado, pero ahora no tengo mucho tiempo):

Código PHP:

  <!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=utf-8" />

<title>Rollover</title>

<script>

function toGrayScale(im){

    im.style.cursor='pointer';

    if(document.createElement("canvas").getContext){

        if(im.gs){

            im.src=im.gs;

            return;

        }

        var ref = document.createElement("canvas");

        ref.width = im.width || im.offsetWidth;

        ref.height =im.height  || im.offsetHeight;

        var context = ref.getContext("2d");

        context.drawImage(im,0,0);

        var iData=context.getImageData(0,0,  ref.width, ref.height);

        var data   = iData.data;

        var length = data.length;

          for (var i = 0;i<length;i+=4) {

            var average = (data[i]+data[i+1]+data[i+2])/3;

              data[i]   = average;

              data[i+1] = average;

              data[i+2] = average;

            

          }

          context.putImageData(iData, 0, 0);

          im.src=im.gs=ref.toDataURL();

    }

    

}

onload=function(){

    toGrayScale(document.getElementById('im'));

    document.getElementById('im').style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'

    if(document.getElementById('im').gs)

        document.getElementById('im').src=document.getElementById('im').gs;

}

</script> 

</head>

 
<body>

<img id="im" onmouseover="this.src='arwen.jpg';this.style.filter=''" onmouseout="this.src=this.gs || 'arwen.jpg';this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" src="arwen.jpg" />

</body>

</html>

dmza · #11 (**permalink**) 01/02/2011, 13:42

Muchas gracias, lo probaré y te cuento que tal me va.

fer1027 · #12 (**permalink**) 26/03/2012, 13:43

Panino, use tu codigo js pero junto con un repeter WHILE en php pero este solo afecta a la primer imagen que trae de vuelta, el resto no tuvo efecto sabrás a que se debe?

Gracias!!!

Panino5001 · #13 (**permalink**) 26/03/2012, 15:23

Habría que ver cómo lo usaste

fer1027 · #14 (**permalink**) 26/03/2012, 15:39

Lo use asi

<div style="float:left; width:76px; height:53px; ">
<img id="im" onmouseover="this.src='images/marcas/<?php echo"$line[logotipo_marca]"?>';this.style.filter=''" onmouseout="this.src=this.gs || 'images/marcas/<?php echo"$line[logotipo_marca]"?>';this.style.filter='progid:DXImageTransform.Mi crosoft.BasicImage(grayscale=1)'" src="images/marcas/<?php echo"$line[logotipo_marca]"?>"/>
</div>

Será el div que forma parte del while?

fer1027 · #15 (**permalink**) 27/03/2012, 13:36

Panino tendrás idea que es lo que estoy haciendo mal, porque no me funciona tu codigo... gracias de antemano por tu ayuda!

F

Panino5001 · #16 (**permalink**) 27/03/2012, 13:57

Te digo lo mismo: sin ver tu código sólo se puede adivinar (el fragmento de código que mostraste no alcanza, además de tener php). Lo más probable es que no estés inicializando correctamente todas las imágenes. Si te fijás en el código, cuando se carga la página pasa esto:

Código PHP:

  toGrayScale(document.getElementById('im'));

Eso es para una imagen en particular, la que tiene como id a "im". Es posible que no estés usando esa función para todas tus imágenes. Incluso, por lo poco que se ve de tu código pareciera que las imágenes tienen todas el mismo id. La idea es que entiendas cómo funciona y no tratar de hacerlo funcionar dando manotazos al azar.
Si algo no entendés del código, con gusto intentaré explicártelo.

fer1027 · #17 (**permalink**) 27/03/2012, 15:40

Gracias por tu tiempo Panino, talvez no puse todo el codigo, perdona pero ahora te lo muestro, el id si lo estoy usando bien y como es un ciclo de repeticion no se lo asigno a cada imagen por separado si no a una sola y el ciclo lo repite el numero de resultados que traiga de regreso, lo puedes chequear.

<?php $query = "SELECT * FROM tabla order by name" ;
$result = mysql_query($query, $con);
if(!$result){
die(mysql_error());
}

if(mysql_num_rows($result)>0){
while($line=mysql_fetch_array($result)){
?>

<div style="float:left; width:48px; height:48px; margin-left:15px; text-align:center;">
<img id="im" onmouseover="this.src='<?php print "$line[imagen]"?>';this.style.filter=''" onmouseout="this.src=this.gs || '<?php print "$line[imagen]"?>';this.style.filter='progid:DXImageTransform.Mi crosoft.BasicImage(grayscale=2)'"
src="<?php print "$line[imagen]"?>" />
</div>

<?php
\\Cierro while
}
\\Cierro condicion
}
?>

Ya comprendi como funciona tu codigo pero no comprendo porque solo funciona en una imagen y el resto no, si pudes ayudarme te agradezco mucho.

Si no es posible, gracias igual!

Panino5001 · #18 (**permalink**) 27/03/2012, 15:52

Todas tus imágenes tienen el mismo id, fijate en el código fuente. Agregales un número o algo que diferencie el id:

Código PHP:

 
<img id="im<?php echo $algo++; ?>"

Y vas a tener que repetir el ciclo en el onload, como te dije antes, para convertir a escala de grises cada una de las imágenes (im1, im2, im3)