imagen el gris y al pasar el mouse en color!.

quisiera saber como lograr que un link que es una imagen este en gris y al pasar el mouse sobre ella se pone de color .. osea queda en su forma original , creo que se hace este efecto con css y psudo clase link a:

pero no se como ..
espero que me puedan ayudar !..
saludos.

Lo mas sencillo

tienes 2 imagenes, una a color otra escala de grises

en a, ligas la de escala de grises

en la pseudo clase hover y focus, la de color

Esa es la solución con CSS, si la quieres en javascript (con jQuery) usa lo siguiente:

Código :

$(document).ready(function() {
   $('#thumbs img').each(function(){
      var esto=$(this);
      var fuente= esto.attr('src');
      var nfuente = fuente.substring(0, fuente.lastIndexOf('.'));
      esto.hover(function(){
         $(this).attr('src', nfuente + '-b.' + /[^.]+$/.exec(fuente));
      }, function(){
         $(this).attr('src', nfuente + '.' + /[^.]+$/.exec(fuente));
      });
   });
});

Este lo usé para una galería de fotos, las fotos a color tienen un prefijo en el nombre del archivo "-b".
Ejemplo: imagen-b.jpg

La de blanco y negro no tiene ese prefijo.
Ejemplo: imagen.jpg

Al hacer un hover, se cambiaba la source automáticamente de la imagen en blanco y negro y se le agregaba el prefijo "-b" para mostrar la foto a color.

Al final tuve que agregar un preloader básico de imágenes igual en jQuery para agilizar la carga de las imágenes que no se mostraban.

Código :

jQuery.preloadImages = function(){
  for(var i = 0; i<arguments.length; i++){
    jQuery("<img>").attr("src", arguments[i]);
  }
}
$.preloadImages("imagen1-b.jpg", "imagen2-b.jpg");

Es la solución más efectiva que encontré al manejar varios archivos, igual se puede hacer con SVG o con HTML5 Canvas de manera automática para que no tengas que convertir todas las imágenes a B&N.

Suerte.

Yo hice algo de esto hace un tiempo con jQuery y PHP, la diferencia es que generaba las imágenes a B&N al vuelo en PHP y luego las cargaba con jQuery, pero del lado del cliente probablemente canvas sea una mejor solución

miren recupere este codigo de un sitio .. que hace algo asi .. me explican como se llama a las fotos y el efecto que hace mouseover y out

<a href="../index.php/vnorte" target="_top" onmouseover="MM_swapImage('barra_r1_c4_s1','','barra_r1_c4_s2.jpg',1);" onmouseout="MM_swapImgRestore();">
<img name="barra_r1_c4_s1" src="http://www.tagchile.cl/barra/barra_r1_c4_s1.jpg" width="100" height="50" border="0" id="barra_r1_c4_s1" alt="Vespucio Norte"></a>

Esa es una función del Dreamweaver bastante sucia, reemplaza la source de manera inline con su función.

Pregunto: ¿no sería más cómodo y sencillo hacer un Sprite con las 2 imágenes, colocar el sprite de fondo y moverlo con el css?, tipo:

Código HTML :

.miObjeto {
   background: url('miSprite.jpg');
   background-position: 0 0;
}

.miObjeto:hover {
   background-position: -80px 0;
}

Un saludo.

Abducted escribió:

Inténtalo con una galería de 500 imágenes y me cuentas.

Yo no lo veo muy complicado, de hecho ya lo he usado.
Con Photoshop te creas una acción, que coja una imagen en color y la guarde con el doble de ancho y la imagen en grises a la izquierda de la original. Le aplicas la acción a la carpeta donde tengas las imágenes, con eso ya tienes todos los sprites en menos de 2 min (incluso si las 500 imágenes tienen un ancho diferente y las quieres todas del mismo tamaño sólo tendías que indicarlo en la acción, y obtendrías todas las imágenes del mismo ancho además)

A partir de aquí sólo poner la clase css más arriba mencionada, y es todo automático, aunque las imágenes tengan un alto diferente no le afecta.

Ahora inténtalo con contenido dinámico

ahora en serio, la forma de lograr esto si necesitas aplicarlo a contenido dinámico o si simplemente te da pereza convertir cada imagen a blanco y negro es utilizando canvas.

investigando un poco y haciendo otro poco de copy paste, logre armar este script que busca todas las imágenes en el documento y les aplica el efecto de escala de grises que desaparece al poner el mouse encima con un bonito fadeOut

podría hacer un tip con esto

primero necesitamos definir un par de estilos:

Código :

.img_container { position: relative; }
.img_container canvas { position: absolute; top: 0; left: 0; } 

y ahora el script que hace todo por nosotros:

Código Javascript :

$(window).load(function(){
    
   //Función que desaparece el canvas cuando hacemos hover a una imagen
    $(".img_container canvas").live("hover", function(){
          $(this).delay(200).fadeOut(800);
        

        
        });
      
   //Aplicamos esta función para todas y cada una de las imágenes en el documento   
   $('img').each(function(){
       
      
      $(this).wrap('<div class="img_container" />');
      
      
      img_d = {width:0,height:0};
         
                  
                if(!img_d.width){
                    // Guardamos las dimensiones de la imagen:
                    img_d.width = this.width;
                    img_d.height = this.height;
                }

                // Llamamos la función que hara toda la magia:
                black_and_white(this);
        

    function black_and_white(image){

       // Creamos nuestro lienzo!
        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");

        // Cuadramos las dimensiones del canvas:
        canvas.width = img_d.width;
        canvas.height = img_d.height;

        // Dibujamos la imagen:
        canvasContext.drawImage(image,0,0);

        // Tomamos la información de la imagen y la ponemos en un array:
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        // Con este loop modificamos todos y cada uno de los pixeles de la imagen
         for (var i = 0, n = data.length; i < n; i += 4) {
         var grayscale = data[i  ] * .3 + data[i+1] * .59 + data[i+2] * .11;
         data[i  ] = grayscale;    // rojo
         data[i+1] = grayscale;    // verde
         data[i+2] = grayscale;    // azul
      // alpha
      }
   


        // Ponemos los nuevos pixeles en escala de grises en el canvas:
        canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);

        // Insertamos el canvas antes de cada imagen:
        image.parentNode.insertBefore(canvas,image);
    }



      });

});

Pueden verlo funcionando aquí

Hay que tener en cuenta que el elemento canvas no es soportado por todos los navegadores y además convertir cada imagen a blanco y negro requiere un elevado uso de los recursos del pc.

Saludos y espero que les sea util

Si, en efecto en ningún momento he dicho que sea la manera más correcta, simplemente estaba aportando una manera más de hacerlo. Eso sí si duda prefiero tu canvas de todas todas.

Está increible como lo has hecho con el canvas, y el efecto de desvanecimiento de B/N a color, sencillamente genial.

Haber si me meto a empaparme el canvas, que últimamente voy muerto de tiempo, la verdad que cuantas más cosas veo en canvas, más me gusta el elemento.

Un saludo.

Canvas es buena opción pero por aquello de las incompatibilidades sería mejor utilizar PHP como dijo The_Fricky y aplicar el método de Abducted o como mejor se les acomode.

Mi opinión es que usar canvas es mejor, tal como lo ha hecho HtrMancera con la única pega de que no funcionará en navegadores que no soporten canvas. Sin embargo en IE 8 y anteriores es posible hacer lo mismo si se lee con atención esto.

Pero la ventaja es que el trabajo pesado lo hace el cliente y no el servidor el cual sería el caso de hacer lo mismo con PHP o similar. Siempre es bueno repartir la carga entre los dos, especialmente si se trata de efectos estéticos es mejor que lo haga el cliente.

Nota a parte para HtrMancera, la primera imagen no es maíz, sino de trigo .

Creo que el punto de quiebre, además del asunto de la compatibilidad es justamente donde se hace la mayor carga de trabajo. En principio me inclino por pensar que primero debería ponerse sobre el cliente, pero hay que tener en cuenta que si el sitio tiene muchas imágenes y hará explotar tu CPU (aka ralentizar tu máquina un rato) es posible que el usuario no termine muy contento de ver que cada vez que accede a la página todo se congela.
Creo que en eso no hay recetas mágicas, es más cuestión de ver qué funciona mejor para cada caso.

Encontre este plugin que básicamente hace lo mismo que el script que puse más arriba pero añade soporte para IE usando filtros en vez de canvas.

Habiendo solucionado el problema de la compatibilidad el único contra de utilizar canvas es el rendimiento, para que se hagan una idea los que no sepan mucho del tema, con una imagen de 900 x 300 pixeles, el 'loop' que se encarga de convertir cada pixel a escala de grises tiene que ejecutarse 270.000 veces, y entre mas grande sea la imagen ese numero crece exponencialmente y si ademas lo aplicamos a varias imágenes pues ya se imaginarán.

De todas formas hice la prueba en chrome con varias imágenes de tamaño considerable que juntas suman alrededor de 2 millones de pixeles y se tarda menos de 1 segundo en renderizarlas todas así que supongo que con un navegador y un pc decentes no tendremos problemas.

The Fricky!:
No creo que eso sea un problema grave. Ni siquiera creo que sea un problema ya que cada imagen se convierte bajo demanda del propio usuario al hacer hover en ellas, una a la vez y no todas juntas. En contraste si se hiciera del lado del servidor, éste tendría que convertirlas todas porque no se sabe de antemano en cuál hará hover el usuario.

@DriverOp: en este caso es al contrario, primero se cargan todas las imágenes a color, después se renderizan a escala de grises y cuando el usuario hace un hover aplicamos un fadeOut para ocultar la imagen creada con canvas y dejar ver la original.

De todas formas tarda mas descargar las imágenes originales que generarlas con javascript, así que no creo que el rendimiento sea un problema.

Yo sigo convencido de que convertir las imágenes a B&N de lado del servidor y llamarlas del lado del cliente es la mejor solución hasta ahorita. No creo que al servidor le duela tanto convertir una sola vez unos cientos de imágenes que hacer que el cliente lo haga cientos de veces.