Créer un filtre sur une image avec du javascript

ascreen de créer un siteIci nous allons voir comment créer un filtre sur image en utilisant un filtre.
Passez votre souris sur l'image pour voir le résultat.
Code de l'image:

<img class="left" style="filter:alpha(opacity=20); -moz-opacity:0.3" onmouseover="high
(this)"
onmouseout="low(this)" alt="ascreen de cr&eacute;er un site" src="ascreen.jpg"
height
="90" width="120" />

Vous avez le choix entre placer directement le code qui suit entre les balises <head> et </head> ou dans un fichier .js . Code de la fonction du filtre à placer entre les balises <head> et </head>:

<script language="JavaScript" type="text/javascript">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",20)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=60
}
function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>

Si vous placez le code ci-dessus dans un fichier dont l'extension se termine par .js, il vous faudra alors mettre le code ci-dessous entre les balise <head> et </head>. Supposons que vous nomez votre fichier js en  "effet-image.js", votre code entre <head> et </head> sera alors:

<script language="JavaScript" type="text/javascript" src="effet-image.js"></script>

Note:
Pour effectuer des changements sur le filtre, modifier les valeurs which2.style.MozOpacity=0.3 et which2.filters.alpha.opacity=60 dans le script et style="opacity: 0.3;"  directement dans le code d'affichage de l'image.

Voir/déposer un commentaire (0) | Signaler un problème