} </script><body>
<layer id="choixClasse" top=50 left=50> <form name="classe">
<input type="radio" name="cl" value="1" onClick=opClasse("1")> première classe<br>
<input type="radio" name="cl" value="2" onClick=opClasse(" 2 " ) >
seconde classe </form>
</layer>
<layer id="optRepas" top=50 left=150 visibility="hidden"> <form name="qRepas">
<input type="checkbox" name="repas" value="oui"> réservation repas
</form> </layer> </body></html>
Couleurs et unités
Dans ce chapitre, nous avons utilisé les couleurs en les nommant plutôt qu'en indiquant la valeur des composantes RGB. En effet, depuis HTML 3.2, il est possible d'utiliser les couleurs définies dans la palette Windows VGA, soit : aqua, black, fuchsia, gray, green, lime, marroon, navy, olive, purple, red, silver, teal, white, yellow.
Sans indication spéciale, les unités sont le pixel (symbole px ) ou encore le point (sym bole pt). On peut aussi donner des unités relatives à la taille de la fonte en cours. Ainsi, tags.P.marginLeft="2em" provoquera un espace à gauche égal à deux fois la hauteur de l'élément fonte.
RÉSUMÉ
On définit une couche par son nom et par son positionnement dans la page, adresse graphique du coin en haut et à gauche :
TOP
etLEFT.
En mode CSS, la couche est définie à l'intérieur des balises de style
<STYLE>
et</STYLE>.
Son nom est précédé du caractère #.La couche peut être positionnée en absolu
ABSOLUTE
(adressage graphique dans la page) ou en relatifRELATIVE
(adresse graphique par rapport au dernier élément défini dans le document hors couche).Le contenu de la couche est codé entre les balises
<SPAN
ID=nom_de_la_couche>
et</SPAN>.
En mode JavaScript, les balises
<LAYER>
pour positionnement absolu et<ILAYER>
pour positionnement relatif permettent à la fois de définir la couche et d'en coder le contenu jusqu'à la balise</LAYER>.
En plus d'ID, TOP et LEFT, la balise <LAYER> admet les attributs sui vants :
•
BGCOLOR
pour la couleur de fond de la couche,• BACKGROUND
pour mettre une image en fond,• WIDTH
etHEIGHT
pour régler la largeur et la hauteur de la couche (en pixels),• CLIP
pour régler la zone de visibilité de la couche (en pixels),• VISIBILITY
pour faire disparaître la couche (VISIBILITY=HIDDEN), la montrer (VISIBILITY=SHOW), ou dans le cas de couches imbriquées, pour prendre la visibilité de la couche dans laquelle cette couche est elle-même définie (VISIBILITY=INHERIT),• SRC
pour permettre d'aller chercher à l'URL qu'il définit un fichier con tenant le codage du contenu de la couche (SRC=URL).Propriétés des couches :
•
name
renvoie le nom de la couche.•
left
ettop
renvoient l'adresse graphique de la couche relativement aux couches parentes en cas d'imbrications de couches.•
pageX
etpageY
renvoient toujours l'adresse graphique de la couche dans la page.•
zlndex
renvoie la valeur d'empilement. •bgColor
renvoie la couleur du fond.•
background.src
renvoie l'URLde l'image mise en fond.128
Positionnement dynamique
•
clip.width
etclip.height
renvoient les dimensions de la zone de visi bilité de la couche.•
clip.top, clip.left, clip.right
etclip.bottom
renvoient les adresses graphiques de la zone de visibilité.•
visibilty
renvoie l'information concernant l'affichage de la couche. •src
renvoie l'URL du document contenu dans la couche si cette dernière utilise un fichier externe. Méthodes des couches :
• moveBy (dx,dy)
déplacement relatif,• moveTo (x,y)
déplacement absolu par rapport à la couche,• moveToAbsolute (x,y)
déplacement absolu par rapport à la page,• resizeBy (dx,dy)
augmentation ou diminution de la taille de la cou che,•
resizeTo(largeur,hauteur)
redéfinition de la taille de la couche, •moveAbove(couche)
placement de la couche devant la couche définie en argument),
•
moveBelow(couche)
placement de la couche derrière la couche défi nie en argument),•
load(url,largeur)
chargement du document dont l'URL est spécifiée dans la couche dont la largeur est obligatoirement précisée.Les événements des couches :
•
onFocus
apparaît lorsqu'on clique sur la couche.•
onBlur
apparaît lorsqu'on quitte un couche en cliquant en dehors. •onMouseOver
apparaît lorsque la souris survole la couche. •on MouseOut
apparaît lorsque la souris quitte la surface de la couche.
•
onLoad
apparaît lorsqu'un fichier est chargé dans une couche.Chapitre 13
Images cliquables
Dans le chapitre précédent, nous avons utilisé des images en guise d'ancre. Nous étions dans une situation où cliquer sur un point quelconque de l'image, entraînait la connexion vers une seule et unique URL (voir Les images en guise d'ancres, page 84).
A plusieurs reprises, nous avons dit que l'on pouvait associer une URL à une portion d'image, et que, en conséquence, cliquer sur cette zone de l'image pouvait permettre la connexion vers cette URL. La correspondance entre différentes zones d'une image et dif férentes URL est nommée image cliquable ou encore image réactive.
Cette méthode est tellement utilisée par les concepteurs de serveurs Web qu'on trouve fréquemment des sites où la home-page ne se compose que d'une image cliquable.
Figure 28 - Image cliquable
Programmation HTML et JavaScript
La home-page de la société Next (figure 28, page 131) est bien conçue : elle se compose essentiellement d'une image cliquable, mais une alternative en mode texte a cependant été préservée pour les browsers non graphiques. Toute la home-page tient dans la fenêtre du browser.Pour réaliser une image cliquable, on commencera par mettre l'image à la taille souhai tée (voir Créer des images, page 407). Si on le peut, on testera la taille de l'image sur diverses dimensions d'écran (PC, Mac, terminaux X), afin de déterminer la taille opti male, en effet, le travail qui va être fait ensuite est suffisamment fastidieux pour ne pas avoir à le recommencer.
La seconde opération consiste à faire un relevé des coordonnées zone par zone des surfa ces cliquables. Si l'on décidait ensuite de modifier la taille de l'image, tout ce travail serait à refaire.
Les zones cliquables vont pouvoir prendre les formes de rectangles, cercles ou polygo
nes.
Une image se mesure en points (ou pixels) ; l'origine de ces coordonnées se situe en haut et à gauche de l'image.
La première méthode que nous allons décrire, bien qu'un peu ancienne, est encore large ment utilisée, et même préférée par certains concepteurs de pages qui lui trouvent l'avan tage de fonctionner même avec d'anciennes versions de browsers. Elle présente néanmoins quelques inconvénients : elle nécessite l'installation sur le serveur d'un pro gramme particulier, imagemap, dont le but est de calculer, à partir des coordonnées gra phique l'URL à atteindre. Au niveau de l'utilisation, cette méthode est aussi beaucoup plus lourde puisque cette résolution est à la charge du serveur ; on multiplie les accès réseaux : à chaque clic sur l'image on fait un aller-retour entre le client et le serveur.