US

Lien hypertexte

Maintenant que l'on sait insérer une image dans un document HTML, on va voir comment faire pour définir des liens hypertextes dont le contenu n'est pas un texte mais une image. Il y a deux façons différentes de procéder : on clique sur l'image toute entière ou on clique sur une région définie de l'image.

Lien image

Le premier type de lien hypertexte sont les liens images. Il s'agit simplement d'une image qui fonctionne comme un lien, c'est-à-dire qu'on va pouvoir cliquer sur l'image entière. Pour ce faire, il suffit d'utiliser l'élément A vu au chapitre précédent et d'utiliser un élément IMG comme texte du lien.

1 
2 
3 
4 
5 
6 
 
<HTML>
<HEAD>
    <TITLE>Lien image</TITLE>
 
<BODY>
    <P><A href="http://getfirefox.com/" title="Get Firefox - Web browsing redefined."><IMG src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png" border="0" alt="Get Firefox" ></A>
Listing 3.7 Lien image.

Remarquez que si vous ne voulez pas de bordure autour de l'image, vous devez spécifier border="0". En effet, lorsque l'image se trouve dans l'élément A, elle n'aura plus une bordure nulle par défaut.

Le résultat, vous l'avez déjà vu à la section précédente, mais juste pour le plaisir, le revoilà. Si par ailleurs vous ne connaissez pas encore le navigateur Web Firefox, n'hésitez pas à cliquer sur l'image pour en savoir plus.

Get Firefox

Zone réactive côté client

Le deuxième type de lien est limité à une certaine zone d'une image. Pour activer le lien, on ne va plus cliquer sur l'image dans son entièreté mais bien sur la zone prédéfinir. Il faut tout d'abord définir des zones et ensuite les associer à une image en construisant une carte de zones. Voyons tout ça sur l'exemple suivant.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
 
11 
12 
13 
<HTML>
<HEAD>
    <TITLE>Zone réactive côté client</TITLE>
 
<BODY>
    <P>
        <MAP name="map1">
            <AREA href="next.htm" shape="rect" coords="175,173,238,194" title="Next">
            <AREA href="water.htm" shape="circle" coords="63,98,22" title="Water">
            <AREA href="house.htm" shape="poly" coords="145,115,218,115,218,63,180,24,145,63" title="House">
        </MAP>
 
        <IMG src="city_map.png" usemap="#map1" border="0">
Listing 3.8 Lien hypertexte sur une région d'une image.

Ce qui donne le résultat suivant. Si vous voulez voir le contour des liens, vous pouvez cliquez-ici et ensuite utiliser la touche TAB de votre clavier pour voir les liens sur l'image. Vous pouvez également déplacer votre souris sur l'image et attendre de voir le curseur se transformer en main et voir les infobulles apparaitre.

Next Water House City map

Carte de zones

La carte de zones se définit avec l'élément MAP. On associe un nom unique à la carte de zones avec l'attribut name. Il reste enfin à lier une carte de zones à l'image en utilisant l'attribut usemap de l'élément IMG. La valeur à donner à cet attribut est le nom de la carte de zones précédé d'une dièse (#).

Zone

Dans la carte de zones, on définit toutes les zones réactives que l'on souhaite entre les balises ouvrantes et fermantes de MAP. Une zone réactive se définit avec l'élément AREA. Il y a trois formes différentes possibles qu'on choisit avec l'attribut shape. Les coordonnées de la forme sont ensuite définies avec l'attribut coords. Le tableau suivant reprend les trois formes possibles, toutes les coordonnées et dimensions sont données en pixels. Le coin supérieur gauche de l'image correspond au point de coordonnées (0, 0), l'axe des x partant vers la droite et celui des y vers le bas.

Valeur de shape Valeur de coords Signification
rect X1,Y1,X2,Y2 Zone rectangulaire
(X1,Y1) : point supérieur gauche
(X2,Y2) : point inférieur droit
circle X,Y,r Zone circulaire
(X,Y) : centre du cercle
r : rayon du cercle
poly X1,Y1,...,Xn,Yn Zone polygonale
(Xi,Yi) : chaque point dans le sens des aiguilles d'une montre
Tableau 3.1 Valeurs des attributs shape et coords de l'élément AREA.

L'élément AREA possède plusieurs autres attributs que nous allons décrire de suite. On peut tout d'abord préciser un texte de remplacement en utilisant l'attribut alt. Celui-ci fonctionne comme pour on l'a vu à section précédente. On peut également spécifier un titre avec l'attribut title, celui-ci apparaitra dans une infobulle au passage de la souris.

Enfin, comme ce sont finalement des liens que l'on définit, on peut utiliser l'attribut src pour indiquer la page que le lien réfère. On peut également utiliser l'attribut target qui identifie la cible du lien.

Zone réactive côté serveur

Les zones réactives que l'on vient de voir sont dites côté client car elles sont définies directement par des zones et l'action à entreprendre lors d'un clic est également défini. On peut également vouloir des zones réactives côté serveur. Dans ce cas, lors d'un clic sur l'image, les coordonnées du clic seront transférées au serveur et c'est lui qui aura la charge d'analyser ces données et agir en conséquence.

Pour ce faire, il suffit d'activer la propriété ismap de l'élément IMG comme le montre l'exemple suivant. Pour rappel, une propriété, c'est comme un attribut, mais pour lequel il ne faut pas préciser de valeur. La seule présence de la propriété correspond à sa valeur que l'on peut en fait voir comme : activé.

1 
2 
3 
4 
5 
6 
<HTML>
<HEAD>
    <TITLE>Zone réactive côté serveur</TITLE>
 
<BODY>
    <P><A href="traitement.php"><IMG src="city_map.png" ismap border="0"></A>
Listing 3.9 Zone réactive côté serveur.

City map

Passez donc votre souris sur l'image suivante, et regardez dans votre navigateur le lien vers lequel pointe cette image. Elle est de la forme suivante :

http://www.ukonline.be/programmation/html/tutoriel/chapitre3/traitement.php?42,79

En fait, le navigateur va suivre le lien précisé par l'attribut href de l'élément A, en lui ajoutant ? suivi des coordonnées (x,y) de la souris sur l'image. Cliquez donc quelque part dans l'image pour vous rendre sur la page de traitement qui vous montre un exemple de récupération des données.

  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0623150 secondes --- This site uses Thumbshots previews