Vous pouvez faire changer la vitesse de déplacement en jouant soit sur l'intervalle de position (from-=20) ou sur le délai du timer (>75msec).Toutes les bases nécessaires à l'emploi du DHTML étant posées dans les chapitres précédents, nous pouvons maintenant appliquer ces principes pour créer nos pages avec des effets DHTML.
Les possibilités du DHTML sont très vaste et il n'est pas possible ici de vous donner une liste exhaustive de celles-ci mais les quelques petits exemples suivants vont vous permettre de mieux comprendre le DHTML et de construire vous-mêmes vos propres effets.
Il est à signaler aussi que vous pouvez trouver sur le Net de nombreux exemples de script DHTML et qu'au fil du temps, le nombre de ces exemples ne fera qu'augmenter (Le site builder de Microsoft, de Netscape etc.)
Quatre exemples de déplacement de texte, un exemple d'apparition et disparition de texte vous sont proposés : tous ceux-ci sont parfaitement visibles par Internet Explorer et Netscape. N'oubliez pas que ces scripts DHTML et bien d'autres sont très facilement réalisables avec WebExpert 5 (assistants proposés sous l'onglet "DHTML")
En Annexe, vous trouverez d'autres quelques exemples ainsi qu'un script de détection qui pourront vous aider dans la création de vos propres sites.
Pour faire se déplacer un texte, par exemple de droite vers la gauche, plusieurs exigences doivent être remplies.
- L'élément devra être positionné (position:relative dans cet exemple) ;
- Un script est nécessaire pour faire varier la position (left) de l'élément depuis la position de départ jusqu'à la position d'arrêt du défilement : fonction deplace();
- Pour être compatibles vis à vis des deux grands navigateurs, il est nécessaire que votre programmation tienne compte que les visiteurs de votre site peuvent posséder l'un ou l'autre : un deuxième script va donc détecter le navigateur utilisé et employer la syntaxe adaptée au navigateur pour le positionnement de l'élément.
L'effet de déplacement du texte est réalisé par le changement (successif) de la position (left dans cet exemple) de l'élément qui le contient.
C'est l'élément, ici DIV, qui change de position et celui-ci peut bien sûr contenir autre chose que du texte (une image, un tableau etc.).
C'est un style en ligne qui est employé pour positionner et définir les attributs de l'élément DIV mais on peut tout aussi facilement le faire avec une feuille de style globale ou liée (avec l'avantage de ne plus devoir définir le style pour les autres effets).
<div ID="texte" style="text-align:center;font-weight:bold;font-size:20px;color:red;position:relative">function deplace(from, to) {
if (from > to) {
pos.left = (from -= 20);
setTimeout('deplace(' + from + ',' + to
+ ')', 75);
}
}
C'est le changement successif des valeurs de la position left de l'élément DIV qui donne l'effet de déplacement : il faut donc faire varier ces valeurs par une fonction. Celle-ci se nomme ici déplace.
Comme la valeur de la propriété de position (left) doit changer successivement (prendre des valeurs différentes), on crée une fonction qui effectue ce changement, à partir d'une position de départ (variable from) jusqu'à une position terminale (variable to).
La valeur de la position (left) de l'élément est diminuée d'une valeur de 20 dans cet exemple : autrement dit, l'élément changera de position de 20 en 20, cette valeur soustraite de la valeur de départ (from) : le premier changement sera donc (from - 20).
Pour que la fonction reçoive des valeurs de from différentes, on emploie un timer qui relance la fonction deplace avec une valeur de from
qui est changée (-20) et pendant un temps déterminé (ici 75 msec) : après chaque 75ms, une nouvelle valeur de position est attribuée à l'élément.
Enfin, pour que le changement de valeur de position ne s'effectue pas indéfiniment, on place une condition if qui détermine que lorsque la valeur de départ (from) est égale ou plus petite (from>to) à la valeur terminale (to), la fonction s'arrête.
Vous pouvez faire changer la vitesse de déplacement en jouant soit sur l'intervalle de position (from-=20) ou sur le délai du timer (>75msec).
Comme nous l'avons vu, les deux grands navigateurs n'utilisent pas la même syntaxe pour la programmation des scripts.
En effet, la propriété visibilité de l'objet (texte) se détermine sous Internet Explorer par document.all.texte.style.left tandis que pour Netscape, la syntaxe est document.texte.left ! La variable pos (dans la fonction deplace) doit donc prendre respectivement pour Internet Explorer (document.all.texte.style) et pour Netscape (document.texte).
Il y a plusieurs solutions pour réaliser le changement de syntaxe : soit vous créez une variable qui prend la valeur correcte (pos), en fonction du navigateur (comme proposé dans la fonction exemple ci-dessus), soit vous créez deux fonctions (deplace() et deplacen()) et en fonction du navigateur employé, vous lancez la fonction qui lui correspond.
Pour vous montrer l'exemple ci-dessous, c'est la dernière solution qui est choisie, mais vous pourrez consulter la seconde dans une page fournie en Annexe.
- Une détection d'Internet Explorer est d'abord effectuée (variable ie4);
- Deux fonctions similaires, avec comme seule différence, la syntaxe appropriée pour Internet Explorer (fonction deplace()) ou Netscape (fonction deplacen()).
- Une condition qui spécifie (bouton ou BODY) quelle fonction lancer, en fonction du navigateur employé.
- Une attribution aux valeurs de départ (from=600) et de fin (to=0) à la fonction, par deplace(600,0) et deplacen(600,0).
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
function deplace(from, to) {
if (from > to) {
document.all.texte.style.left = (from -= 20);
setTimeout('deplace(' + from + ',' + to + ')', 75);
}
}
function deplacen(from, to) {
if (from > to) {
document.texte.left = (from -= 20);
setTimeout('deplacen(' + from + ',' + to + ')', 75);
}
}
// Fin du script -->
</SCRIPT>
Sur le chargement de la page :
<body onload="ie4?deplace(600,0):deplacen(600,0)">
Par l'action (clic) d'un bouton (ou sur lien)
onclick = "ie4?deplace(600,0):deplacen(600,0)"
On procède de la même manière que l'exemple précédent : la fonction est quasiment identique (un signe de différence) et les valeurs de départ et de fin seront bien sûr différente, puisque l'élément vient de gauche cette fois.
Dans cet exemple, c'est également un style en ligne qui est employé pour positionner et définir les attributs de l'élément DIV.
<div ID="texte2" style="text-align:center;font-weight:bold;font-size:20px;color:black;position:relative;visibility:hidden">function deplace2(from, to) {
if (from < to) {
document.all.texte2.style.left = (from += 20);
setTimeout('deplace2(' + from + ',' + to + ')', 75);
}
}
function deplacen2(from, to) {
if (from < to) {
document.texte2.left = (from += 20);
setTimeout('deplacen2(' + from + ',' + to + ')', 75);
}
}
Est changé dans ce script le signe de la portion (from+=20) puisque cette fois, la valeur de left augmente, d'une valeur négative (pour donner l'impression que le texte
vient du côté de l'écran) jusqu'à la valeur 0 (parce que le texte est centré :
text-align:center). La condition ici est inverse, puisque la valeur de départ est plus
petite (from<to).
Sont données cette fois les deux fonctions qui correspondent aux
deux navigateurs : Internet Explorer et Netscape.
Les valeurs de départ employées sont -620 et 0 (deplace2(-620,0)).
Sur le chargement de la page :
<body onload="ie4?deplace2(-620,0):deplacen2(-620,0)">
Par l'action (clic) d'un bouton
<FORM>
<input type=button Value="Déplacement gauche-droite" onclick =
"ie4?deplace2(-620,0):deplacen2(-620,0)">
</FORM>
Pour cet exemple et le suivant, la fonction est un peu différente, c'est la propriété top de l'élément qui change de valeur. Pour le reste, le principe est identique aux deux exercices précédents.
Dans cet exemple, c'est également un style en ligne qui est employé pour positionner et définir les attributs de l'élément DIV.
<div ID="texte4" style="text-align:center;font-size:20px;color:green;position:relative;visibility:hidden">function deplace4(from, to) {
if (from > to) {
document.all.texte4.style.top = (from -= 10);
setTimeout('deplace4(' + from + ',' + to + ')', 75);
}
}
function deplacen4(from, to) {
if (from > to) {
document.texte4.top = (from -= 10);
setTimeout('deplacen4(' + from + ',' + to + ')', 75);
}
}
C'est donc la propriété top de l'élément qui doit varier, d'une valeur plus importante (200) puisque le texte part d'en bas, vers le haut, qui correspond à une valeur plus petite (20). La condition est donc (from >to) et est choisi un pas de 10 (from-=10).
Sont données également les deux fonctions qui correspondent aux deux navigateurs : Internet Explorer et Netscape.
Les valeurs de départ employées sont 200 et 20 (deplace4(200,20)).
Remarque : le nombre 4 de la fonction deplace4() est arbitraire et vous appelez la fonction comme bon vous semble bien sûr…
Sur le chargement de la page :
<body onload="ie4?deplace4(200,20):deplacen4(200,20)">
Par l'action (clic) d'un bouton
<input type=button Value="Déplacement bas-haut" onclick = "showObject(texte4);ie4?deplace4(200,20):deplacen4(200,20)">
C'est toujours la valeur de la propriété top qui doit varier, mais dans le sens inverse cette fois, puisque que texte descend ! Elle prend une valeur de plus en plus grande, jusqu'à celle de fin de déplacement.
Dans cet exemple, c'est toujours un style en ligne qui est employé pour positionner et définir les attributs de l'élément DIV.
<div ID="texte3" style="text-align:center;font-size:20px;color:#800000;position:relative;visibility:hidden">function deplace3(from, to) {
if (from < to) {
document.all.texte3.style.top = (from += 10);
setTimeout('deplace3(' + from + ',' + to + ')', 75);
}
}
function deplacen3(from, to) {
if (from < to) {
document.texte3.top = (from += 10);
setTimeout('deplacen3(' + from + ',' + to + ')', 75);
}
}
La propriété top de l'élément doit varier, d'une valeur plus petite (-40) puisque le texte part d'en haut, vers le bas, qui correspond à une valeur plus grande (80). La condition est donc (from <to) et est choisi également un pas de 10 (from+=10).
Vous sont données les deux fonctions qui correspondent aux deux navigateurs : Internet Explorer et Netscape et les valeurs de départ employées sont -40 et 80 (deplace3(-40,80)).
Sur le chargement de la page :
<body onload="ie4?deplace3(-40,80):deplacen3(-40,80)">
Par l'action (clic) d'un bouton
<input type=button
Value="Déplacement haut-bas"
onclick = "showObject(texte3);ie4?deplace3(-40,80):deplacen3(-40,80)">
Dans cet exemple, c'est la propriété visibility qui est manipulée. On change celle-ci pour l'élément concerné et celui-ci disparaît s'il était visible ou apparaît s'il était invisible : on change donc dynamiquement la propriété...
Cela peut-être intéressant, notamment pour de nombreux effets, où l'objet doit apparaître (alors qu'il est par défaut invisible), et pour proposer des informations : c'est cette illustration que j'ai choisie.
- Créer deux éléments avec positionnement absolu ou relatif (position:relative ou position:absolute) par l'emploi d'une feuille de style globale;
- Propriété visibility des l'éléments en hidden (visibility:hidden);
- Fonctions cache et montre;
- Emploi de l'événement "onclick" pour montrer ou cacher le texte (avec une petite astuce pour Netscape);
- Création de variables (vis, invis, t1 et t2) pour réaliser la syntaxe correcte pour Internet Explorer et Netscape;
- Détection du navigateur employé pour initialiser les variables.
On créer d'abord une feuille de style globale, comme expliqué dans le chapitre sur les feuilles de style :
<STYLE TYPE="text/css">Les signes (<!-- -->) qui englobent les codes de définition des classes ".info1" et ".info2" sont présents uniquement pour permettre aux navigateurs de version inférieure de ne pas tenir compte de ces codes.
Peu de remarques à formuler si ce n'est que ces attributs sont calculés pour que les deux textes se superposent l'un sur l'autre, et que les textes aient des couleurs différentes. J'ai choisi également des les rendre invisibles par défaut (visibility:hidden), mais ce n'est pas obligatoire ;-)
De même, ici, vous pouvez placer toutes sortes d'objet comme contenu des éléments que vous créez (texte, image, tableau...). J'ai choisi des éléments DIV auxquels je vais joindre la classe (CLASS="info") qui leur convient, en plus de les identifier bien sûr (ID).
<DIV ID = "txt" CLASS="info1">Pour changer la propriété visibility, nous devons créer deux fonctions différentes, très simples, qui emploient une variable qui, comme dans les exercices précédents, nous permettront d'employer la syntaxe adéquate correspondant aux deux grands navigateurs.
Cette fonction vous sera très pratique car il est fréquent que l'on veuille faire apparaître ou disparaître des objets (éléments)
Puisqu'est choisi ici (arbitrairement) de cacher les éléments par défaut, il faudra faire en sorte que le clic sur le pseudo-ancre non seulement fasse apparaître la seconde information mais également, fasse disparaître la première et vice versa.
<SCRIPT LANGUAGE = "JavaScript">
<!--
/* Fait apparaître l'objet */
function montre(object) {object.visibility = vis}
/* Fait disparaître l'objet */
function cache(object) {object.visibility = invis}
//-->
</SCRIPT>
Les variables nécessaires à l'emploi de la bonne syntaxe (IE 5.x et N 4.x) sont vis et invis. Pour Internet Explorer, c'est hidden et visible qu'il faut employer tandis que pour Netscape, c'est hide et show par contre. Pour t1 et t2, c'est comme vu précédemment.
Voici le script complet, que vous devez placer en dessous des éléments !
<SCRIPT LANGUAGE = "JavaScript">
var NET = (navigator.appName ==
"Netscape" && parseInt(navigator.appVersion) >= 4);
var invis = (NET) ? 'hide' : 'hidden';
var vis = (NET) ? 'show' : 'visible';
var t1 = (NET) ? document.txt : document.all.txt.style;
var t2 = (NET) ? document.txt2 : document.all.txt2.style;
</SCRIPT>
La détection est effectuée et les variables prennent leur valeur respective.
Comme nous voulons vous donner des exemples parfaitement compatibles entre les deux navigateurs, on parle de pseudo-ancre car en effet, Netscape ne reconnaît actuellement pas l'événement "onclick" si ce n'est sur une ancre (lien) alors qu'IE 5.x l'accepte !
L'astuce consiste donc à insérer les portions de texte qui vont constituer la commande des fonctions, dans un élément A (Anchor) mais dont l'URL sera fictive. De plus, avec le code que vous trouvez ci-dessous, il n'y aura aucun problème car remplacer l'adresse par un simple espace pose des problèmes sous Netscape...
<A HREF = "javascript://" onclick = "cache(t2);montre(t1)">Première information</A><BR>Il ne faut sans doute pas vous expliquer l'événement "onclick" qui est très simple, puissant et dont la syntaxe vous est proposée ci-dessus ;-)
Après tout ce travail, voici le résultat.
Une erreur ! Il manque le lien sur le deuxième texte qui commande la venue de la seconde information ?
En fait, si vous ne désirez pas de soulignement, vous pouvez créer une classe spéciale pour ces ancres, et obtenir ainsi un lien sans soulignement.
|
A.nn {text-decoration:none} :visited.nn {text-decoration:none;font-style:normal} |
L'attribut "font-style:normal" a été ajouté pour enlever la mise en italique des liens visités (feuille de style liée de Tutor DHTML).