Effectivement, je veux dire que tu testes document.all (les if(document.all) pour savoir si tu as affaire à IE, pour ensuite utiliser les propriétés cur.filters.alpha ou cur.style.setProperty selon le navigateur. Ce type de codage est voué à l'échec : certains navigateurs vont répondre vrai à if(document.all) et seront détectés dans IE alors qu'ils ne sont pas IE et n'ont pas cur.filters.alpha.
Il faut donc détecter directement les propriétés elles-mêmes : cur.filters etc.
Mais bon, après il faudra encore jongler avec tout ça, les -moz-opacity, opacity et autres. C'est typiquement le genre de situation où une librairie d'abstraction comme
jQuery devient extrêmement utile, et te permettra d'avoir un code beaucoup plus propre avec le comportement séparé du contenu.
En HTML :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="monscriptjquery.js"></script>
</head>
<body>
<p><a href="…" class="alter_opacity"><img src="…" alt="il faut retranscrire le contenu de l'image ici" /></a></p>
</body>
</html>
On ne fait qu'appeler le javascript dans "head", mais le balisage n'est plus pollué par le javascript.
(N'oublie pas d'indiquer le type de document et de remplacer le alt par
un texte alternatif utile)
Et dans monscriptjquery.js :
Code : Tout sélectionner
// On définit les fonctions appelées lorsque la souris survole ou quitte l'élément
mouseOverOpacity = function() {
// voir http://api.jquery.com/css/#css-map
$(this).css({opacity: 0.4})
}
mouseOutOpacity = function() {
$(this).css({opacity: 1})
}
// Quand le document est prêt (ready), définir les actions au survol (hover)
$(document).ready(function() {
// voir http://api.jquery.com/hover/
$(".alter_opacity").hover(mouseOverOpacity, mouseOutOpacity)
});
L'opacité au survol s'appliquera à toutes les images de la classe "alter_opacity" automatiquement sans que tu n'ait besoin de changer quoi que ce soit en javascript (ce n'est plus vraiment du javascript). jQuery s'occupe lui-meme de gérer l'opacité dans un maximum de navigateurs (la page d'accueil indique IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome). Tu y gagnes la séparation du contenu et du comportement, le tout quasi gratuitement (pour 26Ko, ça ne vaut vraiment plus la peine de s'embêter).
Il faut juste penser à
télécharger la librairie et la placer au bon endroit (ici dans le même dossier que la page web), et le tour est joué !
