INTRODUCTION

Extraits du référentiel d’IGC (capacités énoncées dans le cadre technologique) :

Créer une fenêtre de dialogue et les contrôles associés

Associer des actions programmées à des événements déclencheurs

Modifier une procédure pour prendre en compte un nouveau besoin

A moins d’utiliser le langage VBA d’Office ou Lotus Script, il est possible de traiter les 3 capacités ci-dessus lors de la création de pages HTML grâce au langage Javascript :

q Création de fenêtres popup (pour afficher un message d’avertissement, une définition…)

q Création de formulaire de saisie « en ligne »

q Création de boutons personnalisés qui déclenchent une action suite à un événement (survol de la souris, sur clic de souris)

I/ Des boutons qui réagissent au mouvement de la souris

- Evènement OnMouseOver

- Evènement OnMouseOut

L’objectif de l’exercice est de réaliser un bouton permettant d’ouvrir une page html, le bouton change de couleurs au passage de la souris. En fait, pour chaque élément du menu, il faut créer deux boutons (le premier correspondant à l’état initial et l’autre lors du passage de souris)

Vous disposez des pages html suivantes :

accueil.htm

essai.htm

stockées dans le répertoire minisite2 du serveur.

Activités

1) Copiez le dossier minisite2 du serveur vers votre disque dur

2) Créez avec un logiciel de dessin (paint par exemple) deux boutons de taille 110 X 30 pixels : L’un orange ou rouge foncé et l’autre jaune:

Ces deux boutons vont servir de modèle à partir duquel on va créer d’autres boutons.

3) Enregistrez ces boutons au format GIF en leur donnant comme nom bouton1 et bouton2.

4) Personnalisation des boutons : vous allez maintenant créer le texte à afficher sur chaque bouton :

a. affichez le bouton dans le logiciel de dessin

b. Sélectionnez l’outil de texte, sélectionnez une couleur de texte (contrastant avec la couleur du fond – par exemple texte jaune sur fond rouge)

c. Saisissez le texte dans le bouton (par exemple : Menu essai

d. Sauvegardez le bouton au format GIF en lui donnant le nom du menu (exemple : essai1.gif ou essai2.gif pour le deuxième bouton)

5) Insérez l’image du bouton dans le document

a. Démarrez FrontPage et ouvrez le document accueil.htm

b. Insérez le bouton accueil1.gif en haut à gauche du document (1^ère cellule du tableau) Menu insertion – image – A partir du fichier

c. Définissez un lien hypertexte sur ce bouton (qui pointe sur la page essai.htm)

Vous devez obtenir ceci :

6) Insertion du code javascript

a. Affichez la source du document et localisez le code de l’image et du lien que vous avez défini (menu Affichage – html)

<tr>

<td width="130"><a href="essai.htm"><img

src="images/essai1.gif" border="0" width="110"

height="30"></a></td>

Il suffit de rajouter à la fin de la balise a href les instructions javascript suivantes :

onmouseover="document.images[0].src='images/essai2.gif';"

onmouseout="document.images[0].src='images/essai1.gif';">

Ce qui donne :

<td width="130"><a href="essai.htm"

onmouseover="document.images[0].src='images/essai2.gif';"

onmouseout="document.images[0].src='images/essai1.gif';"><img

src="images/essai1.gif" border="0" width="110"

Explications :

- onmouseover correspond à l’événement « survol de la souris » : au survol de la souris le navigateur affiche l’image essai2.gif

- onmouseout correspond à l’événement « sur sortie de la souris : dès que le pointeur de souris sort de l’image, on affiche le bouton original (essai1.gif)

- Document.images(n).src est une expression javascript qui fait référence à la source de l’image numéro n du document affiché actuellement. Chaque image de la page a un numéro (qui correspond à l’ordre d’affichage), comme le bouton est la première image n vaut 0

7) Sauvegardez les modifications et affichez le résultat dans le navigateur. Que devient le bouton au passage de la souris ?

Pour insérer d’autres boutons, il faut refaire toutes les étapes précédentes, sachant qu’en affichage html il suffit la plupart du temps d’effectuer des copier-coller et de modifier seulement les portions de codes qui changent (en particulier l’argument n dans l’instruction Document.Images(n).src qui augmente à chaque image supplémentaire).