SELFHTML: JavaScript / Exemples d'application / Boutons graphiques dynamiques

SELFHTML/Quickbar JavaScript Exemples d'application

	Boutons graphiques dynamiques
	Boutons graphiques dynamiques - l'exemple

Boutons graphiques dynamiques - l'exemple

Exemple d'affichage: aperçu

On rencontre souvent sur les pages WWW des barres graphiques avec des boutons contenant des liens à des pages déterminées du projet. Si l'utilisateur passe avec la souris sur de tels graphiques, il reconnaît, au changement du curseur et à l'affichage de la destination du lien dans la ligne d'état du navigateur WWW, qu'il s'agit de liens. À l'aide de JavaScript, vous pouvez rendre de tels liens graphiques encore mieux reconnaissables et en même temps donner un peu plus de piquant au guidage de l'utilisateur.

Pour cela, il vous faut deux graphiques semblables de couleur différente par bouton. Dans l'exemple d'affichage de cette partie vous avez les deux paires de boutons suivantes:

Avec l'aide de JavaScript, un graphique se laisse maintenant remplacer par l'autre, par exemple quand le graphique sert de lien et que l'utilisateur y fait passer la souris dessus. Comment cela fonctionne dans le détail est expliqué ci-après.

Cet exemple fonctionne avec Netscape à partir de la version 3.x et avec l'Explorer Internet MS à partir de la version 4.x. Pensez qu'avec Netscape, l'emploi de graphiques dynamiques dans des tableaux peut provoquer des problèmes de décalage dans le tableau.

Remarque: L'exemple contient des liens menant aux explications correspondantes par exemple: 1*. Ces liens ne font pas partie du code source. Dans le cas où vous copiez cet exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous recevriez des messages d'erreur JavaScript.

Exemple:

 <html>
 <head>
 <title>Titre de la page</title>
 <script language="JavaScript">
  <!--
  1* Normal1 = new Image();
  Normal1.src = "button1a.gif"; /* entrez ici le premier graphique standard */
  Highlight1 = new Image();
  Highlight1.src = "button1b.gif"; /* entrez ici le premier graphique éclairé*/

  Normal2 = new Image();
  Normal2.src = "button2a.gif"; /* entrez ici le deuxième graphique standard */
  Highlight2 = new Image();
  Highlight2.src = "button2b.gif"; /* entrez ici le deuxième graphique éclairé */

  /* etc... pour tous les autres graphiques à utiliser */

  2* function changeimage(imageno,objetimage)
  {
   window.document.images[imageno].src = objetimage.src;
  }
 //-->
 </script>
 </head>
 <body>

 3* <table><tr><td>
 <a href="index.htm" onMouseOver="changeimage(0,Highlight1)"
 onMouseOut="changeimage(0,Normal1)">
 <img src="button1a.gif"></a>
 </td><td>
 <a href="lien.htm" onMouseOver="changeimage(1,Highlight2)"
 onMouseOut="changeimage(1,Normal2)">
 <img src="button2a.gif"></a>
 </td></tr></table>

 </body>
 </html>

Explication:

créer de nouveaux objets graphiques pour graphiques éclairés
Pour chaque graphique que vous voulez afficher de façon dynamique, vous devez créer une instance de l' objet images. Ceci s'applique autant aux graphiques qui seront ensuite référencés dans le fichier HTML qu'à ceux qui doivent être affichés dynamiquement au passage de la souris.

Dans l'exemple, une instance objet est crée avec des instructions telles que Normal1 = new Image();. Après avoir créé l'instance objet, toutes les caractéristiques de l'objet peuvent être appelées sous le nom d'objet choisi, dans le premier cas Normal1. D'abord, l'objet ne contient pas de données. Avec l'instruction Normal1.src = "button1a.gif";, un fichier graphique est attribué au nouvel objet graphique.

Répétez les deux instructions décrites pour chaque fichier graphique devant être modifié de façon dynamique - à savoir aussi bien pour les graphiques devant être affichés normalement que pour les fichiers qui doivent être affichés dynamiquement lors du passage de la souris. Attribuez à chaque fois un nouveau nom d'objet.

Fonction changeimage() pour le changement dynamique de graphiques
Le code décrit jusqu'à présent est exécuté directement à la lecture du fichier HTML, étant donné qu'il n'est pas incorporé dans une fonction. L'exécution de ce code n'a cependant aucune influence sur l'affichage et n'est pas remarqué par l'utilisateur. Ce qui doit se passer à l'écran à l'aide de JavaScript, à savoir le changement dynamique d'une image, s'obtient dans la fonction définie changeimage().

La fonction doit être appelée quand l'utilisateur passe la souris sur un lien graphique et aussi quand la souris quitte le domaine du lien. Pour cela, la fonction a besoin de deux paramètres: le numéro du graphique qui doit être échangé dans le fichier (Paramètre imageno), et par quel objet graphique défini auparavant l'image doit être remplacée (Paramètre objetimage). Il suffit ensuite d'une seule instruction à la fonction. Cette instruction remplace l'image en place par la nouvelle. Pensez bien ici à cette relation importante: le remplacement dynamique d'un graphique n'est possible que si pour le nouveau graphique une instance de l'objet images a été créée au préalable. Dans l'exemple, cela a été fait tout au début du script.

Liens graphiques avec Event-Handler pour les mouvements de souris de l'utilisateur
Afin que l'effet désiré se réalise, vous devez définir des graphiques comme liens dans le fichier HTML. Pour des boutons placés les uns à côté des autres, il est recommandé d'utiliser, comme dans l'exemple, un tableau sans quadrillage.

Dans le repère d'ouverture du lien sont notés les Event-Handler onMouseOver= et onMouseOut=. Avec onMouseOver= (quand l'utilisateur passe avec la souris sur une surface associée à un lien - ici donc un graphique), la fonction changeimage(), définie dans le passage script, est appelée. Il en va de même avec onMouseOut= (quand l'utilisateur quitte avec la souris une surface associée à un lien).

À l'appel de changeimage(), les deux paramètres nécessaires sont transmis. Pour cela, numérotez les fichiers graphiques référencés dans le fichier HTML, mais commencez à numéroter à partir de 0: c'est à dire 0 pour le premier graphique dans le fichier, 1 pour le deuxième etc... Attribuez la valeur d'index du graphique incorporé dans le lien. Dans l'exemple, il n'y a dans tout le fichier HTML pas d'autres graphiques que ceux qui doivent être modifiés dynamiquement. C'est pour cela que dans le premier cas, 0 a été transmis (premier graphique du fichier), et dans le deuxième cas, 1 (deuxième graphique du fichier).
Comme deuxième paramètre, attribuez le nom d'objet de l'objet images désiré. Il s'agit de l'un des noms que vous avez attribués au début du passage JavaScript. Dans l'exemple, c'est dans le premier cas Highlight1 pour onMouseover qui a été attribué et Normal1 pour onMouseout.


après:	Afficher la durée de visite sur une page Web
avant:	Vérifier les saisies d'un formulaire

SELFHTML/Quickbar JavaScript Exemples d'application