|
|
|
Table des matières
Application
d'un menu déroulant
Pour faciliter les explications, nous allons employer une convension. Le texte qui sera écrit en noir sera du code HTML, celui en vert sera du javascript et celui en rouge sera soit du javascript soit du HTML à changer en fonction de vos besoins.
Je vais procéder par étape lorsque je vais faire les changements. Ne vous surprenez pas si je réécris des portions de script. Vous remarquerez que les éléments à changer ne seront pas les mêmes (texte rouge).
Comme vous pouvez le constater, cet hyperlien me permet de gérer plusieurs informations sans dénigrer l'aspect visuel de ma page par le biais de longues énumérations. Maintenant, comment modifier les informations présentes à l'intérieur de l'exemple. Plusieurs personnes aimeraient probablement modifier les informations afin d'une utilisation future. Comment faire? En modifiant le langage de programmation javascript. Il faut modifier la partie en rouge illustrée ci-dessous. Donc, il faut insérer l'adresse ainsi que le nom du site que nous désirons obtenir.
<HTML>
<HEAD>
<TITLE>Exemple1</TITLE>
</HEAD>
<BODY BACKGROUND="gif/back1.gif" TEXT="#ffffff"
LINK="#00ff00"
VLINK="#ff0000">
<FORM NAME="form1">
<script language="JavaScript"><!--
Hide the script from old browsers --
function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != "0") {
location=form.select1.options[myindex].value;}
}
//--></SCRIPT>
</head>
<body>
<P><HR ALIGN=LEFT></P>
<P><CENTER><SELECT NAME="select1"
onChange="surfto(this.form)">
<OPTION VALUE="0"
SELECTED>----- Choisir une option -----
<OPTION VALUE="http://members.xoom.com/roenick97/">Aller
au site de Roenick
<OPTION VALUE="http://www.uqam.ca">Aller
au site de l'UQAM
<OPTION VALUE="http://members.xoom.com/sampras28/">Aller
au site de Sampras
<OPTION VALUE="http://www.fortunecity.com/campus/yeshiva/110/">Retour
à la maison
</SELECT></CENTER></P>
<P><CENTER></FORM>
<FORM>
</BODY>
</HTML>