Utilisation de javascript pour faire disparaître une image en dégradé de gris à couleur

Question

Je suis relativement nouveau dans le développement web et je ne sais même pas par où commencer pour coder un javascript qui fait fondre une image en niveaux de gris en une image en couleur au survol de la souris. et vice versa sur mouseoff (< - ou quel que soit ce qu'on appelle).

J'ai regardé partout et ne peux pas trouver un script qui fait cela. Est-ce possible? Puis-je utiliser jquery pour faire ça? D'autres pensées?

Merci beaucoup d'avance pour toute votre aide!

Answer 1

Je pense que tout ce que vous pouvez faire est de charger deux vignettes dans un récipient à la fois, avec le noir et blanc couvrant le dessus de la couleur. Ensuite, vous pouvez utiliser jquery pour fondre l'opacité de la vignette sur 0.0. Voici un exemple de travail (il utilise un simple clic pour le changer une fois, mais je vais laisser le mouseover/mouseout pour vous - vous pouvez accélérer l'animation):

certains html:

<div class="container"> 
    <img src="blackandwhite.jpg" class="bw" /> 
    <img src="colour.jpg" class="colour" /> 
</div> 

code CSS:

.container { position: relative; } 
.container img { position: absolute; } 
.bw { z-index: 101; } 
.colour { z-index: 100; } 

certains jquery:

$(function() { 
    $(".bw").click(function() { 
     $(this).animate({ opacity: 0.0 }, 800); 
    }); 
}); 

Answer 2

La meilleure façon de le faire serait de réelle J'ai deux versions de l'image. Un en niveaux de gris et un en couleur. Pour le garder strictement dans javascript et html, je ne crois pas qu'il n'y ait pas d'autre moyen qu'avec la méthode des deux images. Flash, Silverlight, et peut-être même HTML 5, peuvent le faire facilement.

Answer 3

Voulez-vous vraiment fondre, ou simplement échanger?

En règle générale l'échange se fait via CSS

<a class="btn"></a> 

et le CSS

a.btn { 
    background: url(../images/button-image.png) no-repeat 0 0; 
    width: 110px; 
    height: 16px; 
    margin: 10px 0 0; 
} 
a.btn:hover { 
    background-position: 0 -16px; 
} 

Dans ce cas, il y a une petite amélioration de la performance passe où le bouton-image contient les images empilées verticalement, et css fait glisser l'image de fond autour, mais c'est la même idée. C'est une amélioration de la performance parce que le navigateur a seulement besoin de télécharger 1 image, pas 2.