Vous allez trouver dans cette petite chronique, quelques exemples de DHTML, que vous pourrez facilement employer car je vais vous donner tous les codes nécessaires à introduire dans vos pages...
Microsoft les donne mais comme je sais que certains parmi vous ne maîtrisent pas bien l'anglais, j'ai pensé à eux ;-)
Avant tout, vous devez absolument placer ce code dans l'en-tête de votre page, c'est-à-dire, entre les balises :
<HEAD>et </HEAD>
Voici le code en question, que je viens de changer pour le rendre compatible avec la version 5.0 d'Internet Explorer :<SCRIPT LANGUAGE="Javascript">
<!--
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
//-->
</SCRIPT>
Premier exemple : effet graphique...
En premier lieu, voici le code à introduire dans votre page, dans l'en-tête, à la suite du premier code javascript que je vous ai indiqué ci-dessus...
<SCRIPT LANGUAGE="Javascript">
<!--
function transitionImage() {
if (ie4) {
if (idTransDiv.filters.item(0).status == 0) {
idTransDiv.filters.item(0).apply()
idTransDiv.filters.item(0).transition = 23
idImage.style.visibility == "visible"?
idImage.style.visibility = "hidden":
idImage.style.visibility = "visible"
idTransDiv.filters(0).play(1.000)
}
}
}
//-->
</SCRIPT>
Ensuite, vous placez le code suivant, à l'endroit où vous voulez placer l'image...
<DIV ID="idTransDiv" ONCLICK="transitionImage()"
STYLE="position:relative; top:0; left:0; height:129; width:69;
cursor:hand; background-color:royalblue;
filter:revealTrans(duration=3.0, transition=0);">
<IMG id="idImage" STYLE="position:absolute;
top:0; left:0; padding:0; visibility:visible;"
HEIGHT=129 WIDTH=69 BORDER=0 SRC="imWiz.gif">
</DIV>
Bien sûr, vous devez mettre sur le serveur l'image employée, qui en l'occurrence est ici : imWiz.gif
Vous pouvez voir un exemple sur une autre image, dans ma page : " Chat "
Couleur dynamique...
Action de l'effet (passez votre curseur de souris au-dessus du texte, il change de couleur):
Pour réaliser cet effet, vous devez incorporer, à l'endroit désiré, le code suivant :
<SPAN ONMOUSEOVER="ie4?this.style.color='red':null"
ONMOUSEOUT="ie4?this.style.color='blue':null">
TEXTE EN QUESTION
</SPAN>
Dans l'exemple, j'ai ajouté l'option "GRAS" et une plus grande police... Voici le code exact de l'exemple :
<FONT SIZE=+2><B><SPAN
ONMOUSEOVER="ie4?this.style.color='red':null"
ONMOUSEOUT="ie4?this.style.color='blue':null" >
TEXTE EN QUESTION</SPAN></B></FONT>
Vous pouvez mettre les textes que vous voulez : remplacez les textes par les vôtres...
Texte dynamique...
Action de l'effet (passez votre curseur de souris sur le texte, celui-ci change...) :
Voici le code à insérer :
<A
"javascript:nada()"
ONMOUSEOVER="ie4?this.innerText='Veuillez
cliquez s.v.p.':null"
ONMOUSEOUT="ie4?this.inner
Text='AUTRE
TEXTE':null"
>TEXTE EN
QUESTION</A>
Même code, à peu de choses près, si ce n'est qu'ici, c'est un lien qui sera employé :
Voici le code à insérer :
<A
HREF="imwiz.gif" target="new"
"javascript:nada()"
ONMOUSEOVER="ie4?this.innerText='Voir
l\'image
!':null"
ONMOUSEOUT="ie4?this.inner
Text='LIEN
OPÉRATIONNEL':null"
>LIEN EN
QUESTION</A>
Le code de couleur rouge va créer le lien : dans notre exemple, c'est un lien externe vers l'image "imwiz.gif", qui sera chargé dans une nouvelle fenêtre, appelée "new" (target="new").
Attention, pour
intégrer un caractère de commande, ici l'apostrophe situé après le "l"
de "l'image", il faut
impérativement placer un caractère spécial "\"
qui indique au navigateur que le caractère qui suit ne doit pas être
considéré comme "caractère de commande". Donc, le code exact est :
"Voir l\'image
!"
Vous pouvez encore trouver d'autres exemples DHTML appliqués dans ma section "FAQ IE4.0"...