jquery en niveaux de gris sur hover

Question

Est-ce que quelqu'un sait s'il existe un moyen de créer une image en niveaux de gris en survol - autrement qu'en créant 2 images distinctes et en modifiant le src.

grâce

EDIT - CODE SEMI DE TRAVAIL ...:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="scripts/pixastic-1.custom.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var img = $(".test img") 

    $('.test').hover(function() { 
     $('img', this).pixastic("desaturate"); 
    }, function() { 
     $(this).html(img); 
    }); 

}); 
</script> 

et

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" /> 
</div> 

Comment puis-je modifier cela fonctionne s'il y a plus d'un div sur la page ... comme ça ...

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" /> 
</div> 

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/another_image.jpg" width="100" height="100" alt="" /> 
</div> 

Answer 1

Essayez l'un de ces (b toile OTH utilisation):

1. javascript image processing library - désaturer
2. Desaturate tutorial

Answer 2

La meilleure solution est celle proposée par @Alec, avec l'étiquette <canvas>. Un autre est très compliqué et même s'il est plus compatible avec tous les navigateurs, je ne sais pas si cela fonctionne bien pour des images plus grandes. Cela ferait un appel AJAX sur hover à un script PHP, en envoyant l'URL de l'image en tant que paramètre et ayant le script PHP retourner l'image en niveaux de gris. Si vous avez besoin de plus de détails, je vais écrire un petit script pour vous.

Answer 3

Comme alternative à jQuery mais pas ajdusting la source d'image réelle ou ayant 2 images, je pense que il est possible de faire une échelle de gris d'image dans Flash avec un simple film flash qui gère la souris sur etc.

Cela ressemble comme une bonne valeur: http://www.flashcomponents.net/component/as2_luminosity_gray_scale_utility.html

[non affiliés à cette composante du tout ...]

Answer 4

Voici une solution pour utiliser « une » image, comme voir évidemment vous en aurez, ses images en fait deux collées ensemble, Je ne suis pas sûr si cela aide, j'espère que c'est le cas!

BTW pas jQuery, juste Css

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a> 

CSS:

.myButtonLink { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: url('/path/to/myImage.png') bottom; 
    text-indent: -99999px; 
} 
.myButtonLink:hover { 
    background-position: 0 0; 
} 

source:

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

Answer 5

Si Pixastic est surpuissant pour vous, vous pouvez essayer mon plugin simple jQuery: jquery-grayscale

Vous exécutez comme:

$('img').grayscale(); 

Il utilise <canvas> donc il ne fonctionnera pas dans les anciens navigateurs.