Une autre solution serait svg avec un niveau d'indirection.
Fondamentalement, <img src="wrapper.svg"/> où wrapper.svg applique un filtre svg au format svg, et le svg est un élément d'une image pointant vers votre image raster. Fonctionne à l'Opéra, Chrome, Firefox et probablement IE10 (non testé).
Voici un démo. Vous pouvez passer dans l'url de votre propre si vous encodeURIComponent en premier. Notez bien que pour le passage des paramètres de travail, il s'appuie sur des scripts en cours d'activation, donc si vous avez besoin de l'utiliser dans le <img> éléments ou dans un css image d'arrière-plan, vous aurez besoin de générer du svg fichiers sur le serveur.
Wow, c'est vraiment doux! Juste un heads-up; j'ai incorporé et a dû faire deux modifications mineures, supprimer .toLowerCase() pour la casse url et arr doit être un objet {}. Je veux en niveaux de gris effet lorsque le curseur de l'image.Est-ce possible avec votre solution? Merci, j'ai mis à jour l'exemple ci-dessus avec les corrections suggérées, et a ajouté une animation exemple: dahlström.net/svg/filters/... (qui a bien fonctionné dans Opera et Firefox. Chrome semble pas obtenir le mouseout événements, peut-être c'est seulement lorsqu'il est chargé autonome si, et IE ne supporte pas les Animations SVG). Il est tout à fait possible de faire de l'animation avec des scripts trop bien. oui, il semble script est la seule façon pour l'instant pour un navigateur croix solution
Pas encore, mais Chrome 18 soutiendra les filtres css (publié plus tard cette année). SVG filtres est uniquement pris en charge par Firefox. Vous devriez être capable de trouver un uniforme de toile+javascript solution.
EDIT: Voir Erik Dahlström post pour une autre solution.
SVG filtres sont pris en charge par tous les navigateurs (en comptant IE10 trop) dans le contenu SVG. Mais c'est vrai que pour le moment, Firefox est le seul navigateur qui prend en charge l'utilisation de filtres svg directement sur le contenu HTML. Vrai, j'aurais dû être plus précis sur le contexte.
support natif pour les filtres CSS dans webkit a été ajouté à partir de la version actuelle 19.0.1084.46
soi-webkit-filter: grayscale(1) et qui est mieux et plus facile d'approche que SVG pour webkit...
OriginalL'auteur
Une autre solution serait svg avec un niveau d'indirection.
Fondamentalement,
<img src="wrapper.svg"/>
où wrapper.svg applique un filtre svg au format svg, et le svg est un élément d'une image pointant vers votre image raster. Fonctionne à l'Opéra, Chrome, Firefox et probablement IE10 (non testé).Voici un démo. Vous pouvez passer dans l'url de votre propre si vous
encodeURIComponent
en premier. Notez bien que pour le passage des paramètres de travail, il s'appuie sur des scripts en cours d'activation, donc si vous avez besoin de l'utiliser dans le <img> éléments ou dans un css image d'arrière-plan, vous aurez besoin de générer du svg fichiers sur le serveur..toLowerCase()
pour la casse url etarr
doit être un objet{}
.Je veux en niveaux de gris effet lorsque le curseur de l'image.Est-ce possible avec votre solution?
Merci, j'ai mis à jour l'exemple ci-dessus avec les corrections suggérées, et a ajouté une animation exemple: dahlström.net/svg/filters/... (qui a bien fonctionné dans Opera et Firefox. Chrome semble pas obtenir le mouseout événements, peut-être c'est seulement lorsqu'il est chargé autonome si, et IE ne supporte pas les Animations SVG). Il est tout à fait possible de faire de l'animation avec des scripts trop bien.
oui, il semble script est la seule façon pour l'instant pour un navigateur croix solution
OriginalL'auteur Erik Dahlström
Pas encore, mais Chrome 18 soutiendra les filtres css (publié plus tard cette année). SVG filtres est uniquement pris en charge par Firefox. Vous devriez être capable de trouver un uniforme de toile+javascript solution.
EDIT: Voir Erik Dahlström post pour une autre solution.
Vrai, j'aurais dû être plus précis sur le contexte.
OriginalL'auteur bennedich
Voici une solution HTML5. Pris en charge par les versions actuelles de Chrome: http://webdesignerwall.com/demo/html5-grayscale/
OriginalL'auteur henryaaron