JQuery modifier la teinte, la saturation, gamma de <img>?

Je veux faire une image plus sombre si vous passez votre souris dessus.
Est-il possible de modifier la teinte, la saturation ou le gamma d'une img avec JQuery (ou Javascript)?

InformationsquelleAutor Tomkay | 2010-11-10
  1. 11

    Avez-vous essayé PaintbrushJS ou Pixastic bibliothèque?

    InformationsquelleAutor niksy
  2. 10

    D'afficher et de masquer une semi-transparent noir <div> sur le haut de l'image.

    InformationsquelleAutor Marcelo Cantos
  3. 6

    Il n'est pas possible de le faire à l'aide de seulement JavaScript (car il ne peut pas manipuler les fichiers binaires), cependant vous pouvez le faire avec le HTML5 <canvas> élément à l'aide.

    Jetez un oeil ici, il y a quelques bibliothèques de l'aider.

    Si vous voulez juste fondu, modifier l'opacité sur le vol stationnaire, par exemple:

    $("img").css({ opacity: 0.5 }).hover(function() {
  $(this).animate({ opacity: 1 });
}, function() {
  $(this).animate({ opacity: 0.5 });
});
    InformationsquelleAutor Nick Craver
  4. 5

    J'ai mis en place ce prototype qui utilise un cross-browser, CSS seule solution pour animer l'image de la saturation sur le vol stationnaire. Il y a planty de façons de le faire en JS/jQuery mais bon pourquoi ne pas simplement le faire en CSS?

    img[class*="filter-resat"] {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); //For Firefox 10+
filter: gray; //For IE 6+
-webkit-filter: grayscale(100%); //for Chrome & Safari
//Now we set the opacity
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; //for IE
filter: alpha(opacity=40); //Chrome + Safari
-moz-opacity: 0.6; //Firefox
-khtml-opacity: 0.6; //Safari pre-webkit
opacity: 0.6; //Modern
//Now we set up the transition
-webkit-transition: all 1.0s ease;
-webkit-backface-visibility: hidden;
}
img[class*="filter-resat"]:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
//You can leave this part out and the above code will default to a 1 second transition duration.
img.filter-resat9 { -webkit-transition: all .9s ease;}
img.filter-resat8 { -webkit-transition: all .8s ease;}
img.filter-resat7 { -webkit-transition: all .7s ease;}
img.filter-resat6 { -webkit-transition: all .6s ease;}
img.filter-resat5 { -webkit-transition: all .5s ease;}
img.filter-resat4 { -webkit-transition: all .4s ease;}
img.filter-resat3 { -webkit-transition: all .3s ease;}
img.filter-resat2 { -webkit-transition: all .2s ease;}
img.filter-resat1 { -webkit-transition: all .1s ease;}

    Découvrez la DÉMO ici et la JSfiddle ici

    http://jsfiddle.net/buttonpresser/x6GfX/show/light/

    • Cela doit beaucoup plus upvotes. C'est incroyable!
    • Merci! Je ne pense pas que c'est de la réponse viable car il n'est pas JQuery.
    • Pourquoi utiliser un script si vous pouvez obtenir le même effet avec du CSS? De toute façon, je l'utilise maintenant et pompée que j'ai trouvé cette. J'avais upvote encore si je le pouvais. 🙂
    InformationsquelleAutor Pete Fecteau
  5. 4

    Vous pouvez le faire en CSS

    IMG:hover
{
-ilter: brightness(0.7);
-webkit-filter: brightness(0.7);
-moz-filter: brightness(0.7);
-o-filter: brightness(0.7);
-ms-filter: brightness(0.7);
}

    Il y a un tas d'autres filtres comme le flou, saturation, contraste, ...

    Vous pouvez facilement utiliser JQuery pour modifier le css si vous le souhaitez.

    • Cela a encore de très mauvais soutien. Courant IE et Firefox, par exemple, ne pas le soutenir. Chrome, Safari et la plupart des navigateurs mobiles ne.
    • Ce n'est pas compatible avec tous les navigateurs
    InformationsquelleAutor the_lotus
  6. 2

    L'extension de Marcelo suggestion, vous pourriez avoir une copie de votre image lors de la finale, plus sombre, mettez-la sur le dessus de l'original, et de varier son opacité la souris passe dessus comme Nick dit. Cette méthode permet de faire n'importe quoi avec l'image de la transition: changement de teinte, saturation, etc.
    Un simple Javascript animation de fondu code peut être trouvé ici.

    InformationsquelleAutor Abhranil Das