Rendez hyper-actives différentes parties d'une image incluse grâce à des Cartes d'Images côté Client...
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant. Vous pouvez également essayer de vous référer à la page de test pour voir si votre navigateur supporte les tags utilisés dans cette leçon.
Dans la leçon 7a, nous avons appris comment écrire le HTML pour placer une image incluse dans notre page et dans la leçon 8e, nous avons vu comment rendre l'image entière hyperactive vers un autre élément de même nature. Depuis les premiers jours du web, il existe un moyen de rendre les différentes parties d'une image incluse hyperactives -- connu sous le nom de "carte d'image cliquable".
Mais jusqu'à il y a peu de temps, les cartes d'images cliquables nécessitaient un serveur web pour effectuer certaines tâches. Voici comment ça marche :
Ceci est un processus côté serveur : très efficace et un serveur web pouvait le traiter en une fraction de seconde. Mais cela voulait dire que, pour utiliser des cartes d'images cliquables, on devait toujours avoir accès à un serveur web.
Spyglass fut le premier navigateur intégrant la possibilité de traiter les calculs et transmettre le bon URL à partir des coordonnnées incluses dans le HTML d'une page. Ceci est un processus côté client. Toute la conversation ci-dessus se déroule maintenant entre le navigateur et lui-même ! Pour plus d'informations sur les cartes d'images, consultez la Page d'Aide Imagemap (IHiP).
Le HTML nécessaire pour une carte d'image cliquable est :
<img src="image.gif" usemap="#nom_carte">
où image.gif est le nom du fichier image et nom_carte est un lien vers une ancre nommée (voir la leçon 8d) ailleurs dans le même fichier HTML :
<map name="nom_carte">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
:
:
</map>
Chaque ligne du tag <map>...</map> définit une région "active" différente, spécifiée par les coordonnnées, coords=. x1,y1 sont les pixels horizontal et vertical du coin en haut à gauche (par rapport au coin en haut à gauche de l'image entière), et x2,y2 sont les points horizontal et vertical du coin en bas à droite. URL1, URL2, ... sont les URLs (ou noms de fichiers dans le cas de liens locaux) auxquels la région doit connecter quand on clique dedans.
NOTE : Pour identifier les coordonnées d'une région, il vous faudra utiliser une application graphique. La Page d'Aide ImageMap ou Yahoo listent plusieurs autres utilitaires qui rendront cette tâche facile. Pour cette leçon, nous vous fournirons les coordonnées exactes.
Dans cette leçon, nous allons ajouter à notre page Terminologie des Volcans (fichier term.html) une image décrivant différents types d'éruptions volcaniques. Chacune d'elles sera connectée à un site web externe. Nous créerons également deux liens de plus vers nos propres fichiers (locaux).
Il y a différents types d'éruptions volcaniques et de paysages. Ils peuvent être classés suivant leur <A HREF="explode.html">dynamisme "explosif"</A> et la <A HREF="height.html">hauteur</A> de la colonne éruptive : <p> <center> <font size=+2> Consultez chaque type en cliquant sur une image </font><br> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> <p> </center>
NOTE : Nous avons inclus une image appelée "volcmap" référençant un ensemble de coordonnées. Le tag <center>...</center> aligne l'image au milieu de la page (voir la leçon 20). L'attribut border=0 à l'intérieur du tag <img> supprime le cadre autour de l'image.
Nous avons également intégré des liens pour les deux documents HTML que nous allons créer ci-dessous.
<map name="volcmap"> <area shape="rect" href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html" coords="48,46,204,153"> <area shape="rect" href="explode.html" coords="0,66,26,227"> <area shape="rect" href="height.html" coords="95,283,378,309"> <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/" coords="321,154,468,261"> <area shape="rect" href="http://stromboli.net/" coords="172,155,318,274"> <area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" coords="36,155,168,276"> <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" coords="90,3,343,123"> </map>
NOTE : Vous devriez noter que 5 des 7 zones définies connectent à des sites internet distants. Les deux derniers sont des documents locaux que nous allons créer tout de suite.
<html> <head> <title>Dynamisme Explosif</title> </head> <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Web Volcan / <A HREF="index.html">Index</A> / <A HREF="term.html">Terminologie des Volcans</A> / </H5> <h1 align=center>Dynamisme Explosif</h1> Le <b>dynamisme explosif</b> d'une éruption volcanique observée est estimé par la force calculée de l'éruption. Des expériences ont montré que, quand l'eau entre en contact avec du magma chaud, l'éruption est beaucoup plus puissante - ceci est appelé <b>hydro-volcanisme</b>. <p> Pour les éruptions préhistoriques, la force d'explosion est estimée par le degré de fragmentation de petites particules volcaniques. Une éruption très explosive "brisera" le téphra volcanique bien plus qu'une éruption moins explosive. <p> <a href="term.html"> <img src="../pictures/left.gif" alt="** " border=0> Retour au <i>Web Volcan</i></a> <HR> <ADDRESS> <B><A HREF="index.html">Web Volcan</A> : <A HREF="term.html">Terminologie des Volcans</A> : Dynamisme Explosif</B> <p> créé par Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Etudes Volcaniques, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>dernière modification : 1er Avril 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/explode.html</tt> <p> </body> </html>
<html> <head> <title>Hauteur de la Colonne Eruptive</title> </head> <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Web Volcan / <A HREF="index.html">Index</A> / <A HREF="term.html">Terminologie des Volcans</A> / </H5> <h1 align=center>Hauteur de la Colonne Eruptive</h1> La <b>hauteur</b> d'un nuage d'éruption volcanique (en kilomètres) est enregistrée grâce à une observation directe ou depuis des estimations fondées sur des éléments historiques. <p> Pour les éruptions préhistoriques, cette échelle est calculée sur la <b>dispersion</b> des produits volcaniques - i.e. la surface sur laquelle ils sont éparpillés. Les éruptions volcaniques ayant de très hautes colonnes disperseront le téphra loin et sur une large surface. <p> <a href="term.html"> <img src="../pictures/left.gif" alt="** " border=0> Retour au <i>Web Volcan</i></a> <HR> <ADDRESS> <B><A HREF="index.html">Web Volcan</A> : <A HREF="term.html">Terminologie des Volcans</A> : Hauteur de la Colonne Eruptive</B> <p> créé par Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Etudes Volcaniques, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>Dernière modification : 1er Avril 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/height.html</tt> <p> </body> </html>
Comparez votre page web avec cet exemple de la page image.
Le code HTML pour les cartes images côté client a été développé il y a quelques années, et il fallait prévoir le cas des navigateurs web ne supportant pas cette fonction. C'est moins le cas maintenant. La documentation Netscape fournit quelques exemples pour gérer cette situation. Si vous avez la possibilité de mettre en place le processus des cartes images du côté serveur, vous pouvez l'activer afin qu'il traite les requètes des navigateurs ne supportant pas l'interprétation côté client.
De toute façon, il vaut mieux utiliser les cartes images côté client car cela évite des communications supplémentaires entre le navigateur web et le serveur.
Dans notre cas, nous allons définir une page spéciale avec un message pour les navigateurs web ne supportant pas les cartes images côté client :
<html> <head> <title>Pas de Carte Image Disponible</title> </head> <BODY BGCOLOR = #000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Web Volcan / <A HREF="index.html">Index</A> / <A HREF="term.html">Terminologie des Volcans</A> / </H5> <h1 align=center>Désolé !</h1> Apparemment, votre navigateur web ne supporte pas les cartes images côté client. Vous pouvez quand même accéder à l'information en suivant ces liens : <ul> <li><A HREF="explode.html">Dynamisme Eruptif</A> <li><A HREF="height.html">Hauteur de la Colonne Eruptive</A> <p> <li><A HREF="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html">Surtseyen</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Phréato-Plinien</A> <li><A HREF="http://hvo.wr.usgs.gov/volcanowatch/">Hawaiien</A> <li><A HREF="http://stromboli.net/">Strombolien</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinien</A> </ul> <p> <a href="term.html"> <img src="../pictures/left.gif" alt="** " border=0> Retour au <i>Web Volcan</i></a> <HR> <ADDRESS> <B><A HREF="index.html">Web Volcan</A> : <A HREF="term.html">Terminologie des Volcans</A> : Pas de Carte Image</B> <p> créé par Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Etudes Volcaniques, <A HREF="http://www.bigu.edu/">Big University</A><p> <TT>Dernière modification : 1er Avril 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/nomap.html</tt> <p> </body> </html>
NOTE : Regardez comment nous avons permis à l'internaute d'accéder à la même information qu'avec la carte d'image cliquable. Une bonne page web n'exclut pas un internaute simplement parce qu'elle/il utilise un navigateur différent.
<img src="../pictures/volc.jpg" usemap="#volcmap" border=0>et remplacez-la par
<a href="nomap.html"> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> </a>
NOTE : Vous devriez être capable de décortiquer ce code HTML - si le navigateur web comprend les cartes d'images côté client, il le fait ; sinon, l'image entière relie à la page nomap.html.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.
Revoyons les grandes lignes de cette leçon :
Pour plus d'informations, nous vous suggérons de visiter la Page d'Aide Image Map ou les Sites de Guide de Référence et Didacticiel Imagemap
Trouvez un endroit dans vos pages web où une carte d'image cliquable amènerait plus d'interactivité ou faciliterait la navigation de votre site. N'en ajoutez pas une juste pour le fait d'en avoir une ! Vous devrez d'abord identifier les régions "actives" (vous pouvez le faire de manière approximative si vous êtes réellement perdu). En suivant l'exemple de cette leçon, écrivez le HTML d'une image cliquable.
Ajouter les tags META dans la section HEAD de vos pages... Pourquoi ? Restez branchés !
Ecrire le HTML : Leçon 23 : Cartes d'Images Cliquables
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut23.html