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

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Boutons graphiques dynamiques

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

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 ("effet survol d'images - Mouseover -").

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 trois 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. 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..

Texte source avec explications

L'exemple montre un fichier HTML complet avec une barre de boutons et le JavaScript pour commander les effets de survol d'image.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Boutons graphiques dynamiques </title>
<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "bouton1.gif";     /* premier graphique standard  */
Highlight1 = new Image();
Highlight1.src = "bouton1h.gif"; /* premier graphique éclairé */

Normal2 = new Image();
Normal2.src = "bouton2.gif";     /* deuxième graphique standard  */
Highlight2 = new Image();
Highlight2.src = "bouton2h.gif"; /* deuxième graphique éclairé  */

Normal3 = new Image();
Normal3.src = "bouton3.gif";     /* troisième graphique standard */
Highlight3 = new Image();
Highlight3.src = "bouton3h.gif"; /* troisième graphique éclairé */

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

function change_image(image_no,objet_image) {
 window.document.images[image_no].src = objet_image.src;
}
//-->
</script>
<style type="text/css">
<!--
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p  { color:#000000; font-family:Arial,sans-serif; }
-->
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif" text="#000000">

<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">

<a href="../../../index.htm"
   onMouseOver="change_image(0,Highlight1)"
   onMouseOut="change_image(0,Normal1)"><img src="bouton1.gif"
   width="130" height="30" border="0" alt="accueil"></a><br>
<a href="../../../petitsassistants/index.htm"
   onMouseOver="change_image(1,Highlight2)"
   onMouseOut="change_image(1,Normal2)"><img src="bouton2.gif"
   width="130" height="30" border="0" alt="petits assistants"></a><br>
<a href="../../../misesenpage/index.htm"
   onMouseOver="change_image(2,Highlight3)"
   onMouseOut="change_image(2,Normal3)"><img src="bouton3.gif"
   width="130" height="30" border="0" alt="mise en page"></a><br>

</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">

<h1>Boutons graphiques dynamiques</h1>

<p><b>Passez avec la souris sur les boutons. Vous pouvez m&ecirc;me y cliquer ;-)</b></p>

</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 = "bouton1.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. Dans l'exemple ci-dessus, les commandes correspondantes sont commentées afin que vous puissiez reconnaître ce qui est défini à quel endroit.

Fonction "change_image()" 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 change_image() définie.

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 image_no), et par quel objet graphique défini auparavant l'image doit être remplacée (Paramètre objet_image). 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 gestionnaires d'événement 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 gestionnaires d'événement 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 change_image(), 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 change_image(), 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.


	Afficher la durée de visite sur une page Web
	Vérifier les saisies de formulaire

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application