mis à jour le 01.11.2003

remarques, réflexions : Christian Oïhénart

Les scripts

Mon propos n'est pas de rentrer dans Java ou javascript, mais de montrer que l'on peut réaliser des choses toutes simples avec quelques lignes de code. Je n'aborderai que quelques exemples écrits en javascript (langage léger et orienté objet permettant d'écrire des scripts, inventé par Netscape). Ne pas confondre avec Java qui est un langage de programmation développé par Sun (les programmes Java sont compilés sur le serveur et peuvent être autonomes alors que les scripts écrits avec JavaScript doivent obligatoirement être interprétés par le navigateur).

Cinq scripts sont présentés ici et commentés (merci à Charles Lachat pour les explications sur le 5e !).

Vous trouverez de très nombreux scripts sur de nombreux sites (voir dans Ressources) que vous pourrez télécharger librement et adapter à vos besoins. Attention à ne pas surcharger vos pages d'effets et à rester conscient que suivant les navigateurs, les versions de navigateurs et les plate-formes, les scripts peuvent se comporter de manière diffférente.

1 Un exemple de rollover générant une fenêtre d'alerte

 Code correspondant

<A HREF ="" onmouseover ="alert('J\'avais dit de ne pas toucher')"><IMG SRC="images/javascript2.gif" WIDTH=128 HEIGHT=57 BORDER=0 ALIGN=bottom>

Explications

Le tag A HREF.. comprend l'instruction onmouseover.
Ainsi, si le curseur se trouve au-dessus de l'image, le navigateur affiche une fenêtre d'alerte.

 

2 Un exemple de rollover sur une image (changement de cette image)

Code correspondant

<A HREF="scripts.html" onmouseover="document.coucou.src = 'images/titrescript2.gif'" onmouseout="document.coucou.src = 'images/titrescript.gif'"><IMG SRC="images/titrescript.gif" WIDTH=80 HEIGHT=30 BORDER=0 ALIGN=bottom name=coucou></A>

Explications

Le tag A HREF.. comprend les instructions onmouseover et onmouseout.
Le tag IMG SRC... comprend la déclaration d'une variable pour la propriété name.
Ainsi, si le curseur se trouve au-dessus de l'image, le navigateur affiche la deuxième image (titrescript2.gif) et quand le curseur est en dehors, il affiche la première image (titrescript.gif).
Pour réaliser cet effet, il faut d'abord avoir prévu deux images, puis insérer dans l'Editeur de page la première image (titrescript.gif correspondant à "Survolez-moi !") et lui attribuer un lien.
Sélectionner ensuite cette image et entrer dans l'éditeur HTML, puis écrire à la main onmouseover="document.coucou.src = 'images/titrescript2.gif'" onmouseout="document.coucou.src = 'images/titrescript.gif'" à la bonne place.
Revenir à l'Editeur de page, sélectionner l'image et l'éditer : l'instruction pour le nom se met simplement dans l'onglet Etendu (name=coucou).

Il est aussi possible de rentrer directement tout le code dans l'Editeur HTML.

 

3 Un exemple de rollover sur une image avec changement d'une autre image dans la page

Code correspondant

<A HREF ="scripts.html" onmouseover ="document.survol.src = 'images/javascript4.gif'" onmouseout ="document.survol.src = 'images/pixel.gif'"><IMG SRC="images/javascript3.gif" WIDTH=113 HEIGHT=43 BORDER=0 ALIGN=bottom></A>

<IMG SRC="images/pixel.gif" WIDTH=85 HEIGHT=57 ALIGN=bottom name=survol>

Explications

Le tag A HREF.. comprend les instructions onmouseover et onmouseout.
Le tag IMG SRC... comprend la déclaration d'une variable pour la propriété name pour l'imag qui doit changer.
L'astuce est ici d'avoir une image invisible (pixel.gif) à droite du bouton "Encore un survol ?" et de la remplacer par l'image "Superbe" correspondant à javascript4.gif.

 

4 Un exemple de boutons modifiant l'aspect de la page

Code correspondant

<FORM ACTION="" METHOD=POST>

<CENTER><INPUT TYPE=button NAME=Bouton VALUE="gris" onclick="document.bgColor='silver'"><INPUT TYPE=button NAME=Bouton VALUE="vert" onclick="document.bgColor='lightgreen'"><INPUT TYPE=button NAME=Bouton VALUE="fuchsia" onclick="document.bgColor='fuchsia'"><INPUT TYPE=button NAME=Bouton VALUE="bleu" onclick="document.bgColor='lightblue'"><INPUT TYPE=button NAME=Bouton VALUE="blanc" onclick="document.bgColor='white'"></CENTER>

</FORM>

Explications

Ces boutons se trouvent dans une zone de formulaire afin que Netscape les voie. 

 

5 Un exemple de menu déroulant

Code correspondant

Entre les balises <HEAD> et </HEAD>

<script><!--
function change_url (sel) {
window.open(sel.options[sel.selectedIndex].value+".html", "_top");
sel.selectedIndex = 0;
}
// --></script>

A l'endroit souhaité du menu

<FORM ACTION="" METHOD=POST name="nom_de_form">
<P>&nbsp;</P>
<P><SELECT NAME=premier onchange="change_url(this)">
<OPTION SELECTED>BD : Faites votre choix...
<OPTION VALUE=garfield>garfield
<OPTION VALUE=mickey>mickey
<OPTION VALUE=obelix>obélix
<OPTION VALUE=simpsons>simpsons
</SELECT></P>
</FORM>

Explications

On arrive ici à des instructions plus complexes : l'idée est de pouvoir sélectionner à partir d'un menu déroulant une adresse url. Le menu déroulant va se trouver dans une zone de formulaire et il fera appel à une fonction javascript décrite dans l'en-tête du document.

Menu déroulant (popup):

<SELECT NAME=premier onChange="change_url(this)"> l'événement détecté est onChange et on applique à cet événement le gestionnaire change_url avec passage du paramètre (this) propre à l'élément de form SELECT. . 

<OPTION SELECTED>BD : Faites votre choix... correspond au texte affiché par défaut 

<OPTION VALUE=garfied>garfield la valeur garfield sera transmise au gestionnaire change_url par le paramètre this. garfield a été choisi parce que l'url à afficher s'appelle garfield.html.

Script :

window.open(sel.options[sel.selectedIndex].value+".html" renvoie garfield.html ou mickey.html ou ... selon le choix effectué par l'utilisateur

"_blank" est un paramètre optionnel qui permet d'ouvrir la nouvelle URL dans une nouvelle fenêtre ou dans la même fenêtre que la fenêtre appelante (_top).

sel.selectedIndex renvoie 1 pour garfield, 2 pour mickey, etc et 0 pour "BD : Faites vote choix..."

sel.selectedIndex = 0 positionne le popup sur "BD : Faites votre choix..."

 

 
Page précédente   Page suivante