Effets de transition et de styles
(IE version 4 et +)

1. Effets de transition et de filtres

Internet Explorer (le seul à ce jour), version 4 et supérieure, permet de créer des effets de filtre et de transition sur les éléments. Comme ces effets sont d'un bel effet (c'est le cas de le dire), on ne pouvait ignorer ces belles facultés...
Voici le script qui réalise cette fonction de transition (filtre) sur une image ou du texte :

a) Description des scripts

var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
        if (ie4) {

function transitionImage() {
    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)
}
}
}
// Fin du script -->
</SCRIPT>

Le script applique une transition (il y en a 22 actuellement : le chiffre 23 désignant un choix aléatoire), et applique une condition pour la propriété visibility (si celle-ci est hidden-->visible et inversement) et enfin, un timing pour l'exécution de la transition (msec).

Si vous désirez que le filtre ne s'opère que pour un objet visible (ou invisible), vous retirez la vérification qui s'applique pour le cas qui ne vous intéresse pas.

Bien sûr, vous lancez la fonction transitionImage() sur l'événement qui vous intéresse (chargement ou fermeture de la page, bouton, mots, lien etc.). Dans l'exemple choisi, c'est sur un bouton.

Pour réaliser l'effet de transition de texte, deux scripts : un pour le premier texte (WEBEXPERT) et l'autre pour le deuxième (VERSION 5). L'astuce, si l'on peut dire, est de placer l'exécution de la seconde fonction à la fin de la première, et comme l'élément (DIV) qui contient le premier texte est en visibility:visible et l'autre en visibility:hidden, quand le premier script fait disparaître (par une transition) le premier élément, le second fait apparaître le dernier élément et vice-versa (grâce à la vérification de visibility des scripts !

Est ajouté ici une détection d'Internet Explorer (déjà proposée précédemment), version 4 et supérieure, pour que Netscape ne propose pas une erreur de script ! L'image et le texte seront détecté par Netscape et il suffira, de placer correctement ceux-ci dans vos pages pour que les visiteurs qui emploient Netscape visionnent correctement votre document.

b) Attributs de l'élément conteneur

C'est un élément SPAN qui a été choisi mais un élément DIV convient tout autant. La petite astuce est d'employer un élément P pour insérer du texte, plutôt qu'une image (IMG).

<SPAN ID="idTransDiv"
STYLE="position:relative; top:0; left:200; height:90; width:144;
background-color:white; filter:revealTrans();">
<IMG id="idImage" STYLE="position:absolute; top:0; left:0; visibility:hidden;"
HEIGHT=90 WIDTH=144 BORDER=0 SRC="notecomp.gif">
</SPAN>

<SPAN ID="idTransTxt"
STYLE="position:absolute; top:140; left:230; height:80; width:500;
filter:revealTrans();">
<P id="idTxt" STYLE="font-size:50px;font-weight:bold;position:absolute;visibility:visible;">
WEBEXPERT </P>
</SPAN>

<SPAN ID="idTransTxt2" STYLE="position:relative; top:20; left:130; height:80; width:500; filter:revealTrans();"> <P id="idTxt2" STYLE="font-size:50px;font-weight:bold;position:absolute;color:red;visibility:hidden;">VERSION 5</P>
</SPAN>

Vous pouvez employer également une couleur de fond (par exemple, background-color:red). Dans ce cas, vous pourriez conjuguer plusieurs transitions de couleur, mais c'est à déterminer en fonction de ce que vous désirez obtenir. Dans les exemples qui vous sont présentés, au début de la page, l'effet graphique est plus joli sans couleur de fond...

c) Boutons de commande

Dans cet exemple, ce sont des boutons DHTML qui sont utilisés (avec le nouvel élément BUTTON [HTML 4.0]) qu'Internet Explorer reconnaît déjà : avouez que c'est nettement plus joli...

Voici les codes de ces boutons spéciaux :

Vous avez sans doute remarqué que lorsque vous placez le pointeur de votre souris sur les boutons de commande (même les boutons classiques), celui-ci se transforme en petite main (IE4 et plus) : ceci est obtenu en introduisant dans l'élément INPUT un style en ligne. Si vous désirez cet effet, voici le code à ajouter : STYLE="cursor:hand".
Vous pouvez également ajouter, dans le code HTML, l'attribut "title" qui donne une petite bulle explicative (info-bulle, comme "alt" pour une image) sur pratiquement tous les éléments du document et c'est très pratique. Actuellement, seul Internet Explorer 4 et plus le reconnaît. En voici la syntaxe : title="Le texte explicatif de l'info-bulle..." : exemple pratique sur un lien.

2. Quelques effets de styles (IE version 4 et +)

Voici encore quelques exemples de Dynamic HTML que seul Internet Explorer reconnaît actuellement :

a) Ancre avec changement de couleur :

Placez le curseur de votre souris sur le lien situé ci-dessous ! Le lien "E-MAIL" change de couleur...

Voici le code nécessaire...

Le lien devient en caractères italiques après avoir cliqué sur celui-ci : ceci provient du fait qu'est employée dans la feuille de style (liée) du tutoriel, une règle de présentation pour tous les liens (:visited {font-style:italic}) et du fait de votre clic, le lien devient "visited", il prend donc l'aspect italique. Ce dernier effet n'est pas produit par le code mais bien par la pseudo-classe des ancres (section des feuilles de style)

Pour que Netscape ne pose pas de problème, il faut employer la détection d'IE (vu précédemment et rappelée en Annexe).
Ajoutez : ie4?this.style.color='yellow':null
En procédant ainsi, seul IE appliquera le code tandis que Netscape l'ignorera...

b) Texte avec changement de couleur et police

Dans l'exemple ci-dessous, le changement de style porte sur la couleur et la police du texte : positionnez le pointeur de votre souris sur la phrase ci-dessous...

Voici le code employé

Pour que le curseur de la souris se transforme en "petite main" (hand), on peut ajouter la propriété de style supplémentaire : cursor:hand.

Même effet sans changement de couleur

Cette fois, seul le changement de police est créé :

En voici le code...

Changement de couleur seul

Dans l'exemple ci-dessous, ce n'est pas la police qui est ajoutée, mais bien le changement de couleur :

Voici le code de l'effet de couleur

Comme vous le voyez, beaucoup d'effets de style peuvent être réalisé par le style en ligne...

c) Ancres originales

Voici pour terminer quelques exemples d'ancres assez spéciales :

En effet, lorsqu'on clique sur celles-ci, un changement du texte de l'ancre se produit ! La fonction interne "nada" d'Internet Explorer est cependant nécessaire...
Le contenu du texte de l'ancre est changé avec le passage de la souris ! Un changement de couleur est ajouté également (sans couleur, enlever [this.style.color ='blue';])

Texte avant le passage de la souris

Voici le code magique !

Le même effet sans changement de couleur

Texte avant le passage de la souris

Le code avec l'effet de couleur supprimé

<A HREF="javascript://" "javascript:nada()" ONMOUSEOVER="ie4?this.innerText='Passage de la souris...':null" ONMOUSEOUT="ie4?this.innerText='Après le passage de la souris':null" >
Texte avant le passage de la souris
</A>

Si vous ne désirez pas de lien, et ne pas avoir de soulignement, vous devez créer une classe spéciale pour ces ancres (comme décrit dans la section DHTML).

Voici les deux effets réalisés avec le choix de cette classe (CLASS) spéciale :

3. Différentes feuilles de style globales dans un même document

a) Technique

Quand on crée un site, il faut se poser la question suivante : "Pour quelle résolution d'écran vais-je optimiser mes pages ?"
En effet, les dimensions d'un écran de 640x600 sont beaucoup plus petite que celle de 1024x768. Or, les visiteurs possèdent chacun leur propre résolution et il n'est pas concevable d'espérer que ceux-ci la changent en fonction de votre site...

Diverses solutions existent pour résoudre cet inconvénient. 

• La première, la plus simple, est de prévenir tout visiteur que le site est optimisé pour telle résolution d'écran (par exemple, la plus employée actuellement : 800x600), et dans ce cas, tout visiteur possédant une résolution différente sera prévenu que l'optimisation de sa visite ne sera pas optimale;
• Une autre est de doubler, voire tripler les pages que l'on désirent parfaitement adaptées à chaque résolution : pour cela, on crée des scripts de détection des différentes résolutions et on dirige les navigateurs vers les pages correspondantes (re-direction): cela nécessite un travail très fastidieux, non seulement de création mais surtout, de maintenance du site;
• Enfin, une autre solution est celle, qui va vous être expliquée ici, qui consiste à créer des feuilles de style différentes pour chaque résolution. L'avantage est qu'une seule page doit être créée mais celle-ci sera visionnée avec des paramètres de formatage (styles) différents en fonction de la détection des résolutions d'écran des visiteurs.

Je crois qu'il est raisonnable d'employer les trois solutions, c'est-à-dire que pour certaines parties du site, on optimise les pages, et pour le reste, on les crée en fonction d'une résolution que l'on précise "par défaut".

Pour réaliser la troisième solution proposée, il est nécessaire de créer des scripts qui détectent quelle résolution d'écran possède le visiteur du site. Ce script devra être écrit dans un standard, pour éviter toute incompatibilité, c'est pourquoi, le meilleur compromis est sans aucun doute, le javascript.

Ensuite, il est nécessaire que le navigateur puisse comprendre le langage d'activation/désactivation des différentes feuilles de style : actuellement, Netscape ne peut le faire.

Enfin, par le script de détection, on active la feuille de style qui correspond à la résolution détectée et désactive les autres.

b) Scripts

Voici un exemple de scripts pour la détection des différentes résolutions d'écran, de forme assez simple, pour vous permettre une meilleure compréhension.

<script LANGUAGE="JavaScript">

if ( (screen.width >= 1024) || (screen.height >=768))
{
document.styleSheets['r10'].disabled = false;
document.styleSheets['r8'].disabled = true;
document.styleSheets['r6'].disabled = true;
}

if ( (screen.width <= 640) || (screen.height <=480))
{
document.styleSheets['r10'].disabled = true;
document.styleSheets['r8'].disabled = true;
document.styleSheets['r6'].disabled = false;
}

if ( (screen.width == 800 ) || (screen.height == 600))
{
document.styleSheets['r10'].disabled = true;
document.styleSheets['r8'].disabled = false;
document.styleSheets['r6'].disabled = true;
}

</script>

Le script vérifie si la condition de résolution est remplie. Si c'est le cas, il active (disabled = false) la feuille de style correspondante et désactive (disabled = true) les deux autres feuilles de style.

Pour "couvrir" toute les résolutions possibles, on a choisi ici des "fourchettes" de résolution (plus petite que 640x600 jusqu'à 1024x768 et plus). Remarquez que la largeur de l'écran est analysée ainsi que sa hauteur...

c) Feuilles de style globales

Dans l'en-tête du document, on place les feuilles de style globales en les distinguant par une identification propre (ID=" "). ces fuilles de styles globales se créent de manière habituelle, hormis le fait qu'on les identifie...

<style ID="r6" TYPE="text/css" DISABLED>
BODY {background-color:#996633}
H1 {text-align:center;font-size:17px;color:darkgreen}
P {font-size:10px;text-align:justify;;color:white}
:link{font-size:10px;color:yellow;font-family:Arial;text-decoration:none}
STRONG {font-size:13px;font-weight:bold}
</style>

<style ID="r10" TYPE="text/css" DISABLED>
BODY {background-color:#FF9900}
H1 {text-align:center;font-size:30px;color:red}
P {font-size:15px;text-align:justify;;color:black}
:link{font-size:15px;color:royalblue;font-family:Arial;text-decoration:none}
STRONG {font-size:20px;font-weight:bold}
</style>

<style ID="r8" TYPE="text/css" DISABLED>
BODY {background-color:#000080}
H1 {text-align:center;font-size:20px;color:yellow}
P {font-size:12px;text-align:justify;color:#FFFFCC}
:link{font-size:12px;color:royalblue;font-family:Arial;font-weight:bold}
STRONG {font-size:15px;font-weight:bold}
</style>

Dans cet exemple, on a choisi trois feuilles de style globales différentes (r6 - r10 - r8) qui vont correspondre chacune à une résolution d'écran comprise entre 640x400 --> 1024x768 et plus.

Bien sûr, les dimensions des caractères et autres styles sont créés en rapport avec la résolution d'écran ciblée. Il a été choisi, dans cet exemple, des choix très différents, pour que vous puissiez visionner les différences de formatage (dans la page exemple), mais il sera souvent uniquement nécessaire de changer les dimensions des caractères et/ou images, puisque une différence de couleur ou autre styles n'a pas grand intérêt puisqu'un site possède, normalement, un style de présentation uniforme.

Cette technique fonctionne bien dans le cas où vos graphiques peuvent être identiques dans les trois résolutions d'écran. En effet, si ceux-ci doivent être redimensionnés en fonction des résolutions (graphique visionné en plus grand sous 640x600 que sous 1024x768), il sera préférable d'employer la technique de "re-direction" vers des pages différentes.

d) Page exemple

Si vous désirez visionner une page exemple, comprenant les différentes feuilles de style globales décrites ci-dessus, vous pouvez le faire dès maintenant. 

N'oubliez pas que pour constater les différences de formatage (style), il faut que vous changiez la résolution de votre écran (c'est possible dans les propriétés d'affichage de Windows98 par exemple, ou par le dispositif prévu avec votre carte graphique) et la réactualiser si nécessaire.