Ce script est déclaré obsolète. Il n'est conservé que pour information.

Script : Filtres sur les images

Internet Explorer permet d'afficher les images avec des filtres très simple à mettre en oeuvre (noir et blanc, motion blur, ombrage, ...)

<html><head><title>Tout JavaScript.com - Filtre sur les images</title>
<SCRIPT LANGUAGE="JavaScript">
// Script développé par http://www.toutjavascript.com

// Fonction qui déclenche le filtre
function run_filter(obj){	
	if(obj && obj.filters[0]){
		obj.filters[0].apply();
		obj.visibility="visible";
		obj.filters[0].play();
	}
}

</SCRIPT>

<BODY text="#000000" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00">
<CENTER>
<BIG>Effet de filtres sur des images</BIG> </CENTER>

Internet Explorer permet de gérer des effets sur les images appelés filtres. Voici un filtre dynamique : 
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo4.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=0.5)" onLoad="run_filter(this)" onMouseOver="run_filter(this)">
	</A>

De nombreux autres effets statiques sont possibles :
<TABLE>
<TR>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15)">
	</A> 
	Filtre pixélisation
	</TD>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=135)">
	</A> 
	Flou de mouvement
	</TD>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Blur(strength=15)">
	</A> 
	Flou
	</TD>
</TR>
<TR>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Shadow(strength=5, Direction=135, Color:orange)">
	</A> 
	Ombrage
	</TD>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Glow(strength=5, Color:orange)">
	</A> 
	Bordure
	</TD>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=20)">
	</A> 
	Transparence alpha
	</TD>
</TR>
<TR>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo3.jpg" width="200" height="200" border="1" alt="Matériel informatique" style="filter:XRay()">
	</A> 
	Négatif photo
	</TD>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:Gray()">
	</A> 
	Noir et blanc
	</TD>
	<TD align=center style="font-size:10pt">
	<A href="http://www.microscop.net/catalogue" target="_blank">
		<img src="diapo3.jpg" width="200" height="200" border="1" alt="Matériel informatique" style="filter:Invert()">
	</A> 
	Couleurs inversées
	</TD>
</TR>
</TABLE> 
Syntaxe HTML pour la balise IMG : 
<img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Shadow(strength=5, Direction=135, Color:orange)"> 
Affichez la source de la page pour voir le détail des filtres possibles. 
 
Les images sont issues du catalogue de mon partenaire <A href='http://www.microscop.net/catalogue' target=_blank>Micronetscop</A>

<CENTER><A href='http://www.toutjavascript.com' target='_blank'>Tout JavaScript.com</A>

</BODY>
</HTML>

Exécution du script

Code source

<html><head><title>Tout JavaScript.com - Filtre sur les images</title><SCRIPT LANGUAGE="JavaScript">// Script développé par http://www.toutjavascript.com// Fonction qui déclenche le filtrefunction run_filter(obj){        if(obj && obj.filters[0]){        obj.filters[0].apply();        obj.visibility="visible";        obj.filters[0].play();    }}</script><BODY text="#000000" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00"><FONT FACE="Arial" SIZE='-1' COLOR="navy"><CENTER><BIG><B>Effet de filtres sur des images</B></BIG><BR><BR></CENTER><P>Internet Explorer permet de gérer des effets sur les images appelés filtres. Voici un filtre dynamique :<BR>    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo4.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=0.5)" onLoad="run_filter(this)" onMouseOver="run_filter(this)">    </A><BR><BR><BR>De nombreux autres effets statiques sont possibles :<TABLE><TR>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15)">    </A><BR>    <B>Filtre pixélisation</B>    </TD>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=135)">    </A><BR>    <B>Flou de mouvement</B>    </TD>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique"  style="filter:progid:DXImageTransform.Microsoft.Blur(strength=15)">    </A><BR>    <B>Flou</B>    </TD></TR><TR>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Shadow(strength=5, Direction=135, Color:orange)">    </A><BR>    <B>Ombrage</B>    </TD>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:progid:DXImageTransform.Microsoft.Glow(strength=5, Color:orange)">    </A><BR>    <B>Bordure</B>    </TD>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique"  style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=20)">    </A><BR>    <B>Transparence alpha</B>    </TD></TR><TR>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo3.jpg" width="200" height="200" border="1" alt="Matériel informatique" style="filter:XRay()">    </A><BR>    <B>Négatif photo</B>    </TD>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo1.gif" width="200" height="200" border="1" alt="Matériel informatique" style="filter:Gray()">    </A><BR>    <B>Noir et blanc</B>    </TD>    <TD align=center style="font-size:10pt">    <A href="http://www.microscop.net/catalogue" target="_blank">        <img src="diapo3.jpg" width="200" height="200" border="1" alt="Matériel informatique"  style="filter:Invert()">    </A><BR>    <B>Couleurs inversées</B>    </TD></TR></TABLE><BR>Syntaxe HTML pour la balise IMG :<BR>&lt;img src="diapo2.gif" width="200" height="200" border="1" alt="Matériel informatique"<BR> style="filter:progid:DXImageTransform.Microsoft.Shadow(strength=5, Direction=135, Color:orange)"><BR>Affichez la source de la page pour voir le détail des filtres possibles.<BR><BR><BR>Les images sont issues du catalogue de mon partenaire <A href='http://www.microscop.net/catalogue' target=_blank>Micronetscop</A><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><CENTER><A href='http://www.toutjavascript.com' target='_blank'><FONT size=1 color=#CCCFFF>Tout JavaScript.com</FONT></A></FONT></BODY></HTML><!-- D'autres scripts et des conseils sur http://www.toutjavascript.com -->

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...

Script : Filtres sur les images

Exécution du script

Code source

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...

Le graph des objets JavaScript