Hyperimages

Par Aaron Maltais
Févier 2001

Une hyperimage est une image sur une page web qui renferme deux liens ou plus. On les met en marche en cliquant sur différentes parties de l'image. Un exemple d'une hyperimage pourrait être une image du monde où l'utilisateur, en cliquant sur n'importe quel pays, se verra transporté à ce pays. En faisant appel à l'expérience de convertir un document ordinogramme pour qu'il serve sur un site Web, cette étude de cas expliquera comment on peut créer des hyperimages pour des pages web, en apportant, en même temps, de l'information sur les ordinogrammes pour le réseau.

Pour commencer, il y a de bonnes raisons pour éviter l'emploi d'hyperimages vues du côté client sur votre site Web. Il y aura, parmi les explorateurs du Web, des plus vieux qui ne pourront pas interpréter le code HTML qui crée l'hyperimage. Netscape 2.0 et Internet Explorer 2.0 , ou un autre logiciel plus avancé, déchiffrera le HTML pour l'hyperimage simple (vue du côté client) qu'on décrit ci-dessous. La compatibilité n'est pas un souci important.

Au lieu de créer une hyperimage, on peeut couper une image en plusieurs images plus petites, au moyen de logiciels pour traitement graphiques tels que Adobe Paintshop ou Paint Shop Pro. A l'aide de tableaux, chaque image distincte peut être disposée pour recréer l'image originale sur un site Web. Pour chaque image on crée un lien, qui a pour résultat l'effet d'une hyperimage sans se servir d'un code HTML avancé. Cela pourrait être plus simple que de créer une hyperimage quand l'image est assez simple et est divisible en plusieurs parties qu'on peut facilement arranger. Toutefois, ce procédé peut poser des problèmes et devenir pénible si l'image est un peut plus compliquée.

L'ordinogramme ci-dessous n'était pas un bon candidat pour être coupée en plusieurs images.

Les boîtes bleus seulement sont des objets reliés dans l'image. Les liens indiquent un ordinogramme plus détaillé pour chaque sujet. Puisque les boîtes ont un effet ombré et des emplacements sporadiques, il était trop difficle de couper l'image en plusieurs images.

On a donc pris la décision de créer une hyperimage. Le fait que le logiciel ordinogramme utilisé pour créer l'image ci-dessus a promis qu'on pourrait faire cela de fa¢on automatique a rendu cette option particuliairement attrayante.

Cet ordinogramme a été créé à l'aide d'un ensemble de programmes appelé iGrafx. Comme un document ordinogramme, les boîtes à relier sont des objets individuels qu'on peut lier à d'autres documents tels les sites Web. Converti à HTML, l'ordinogramme est changé en image par ce logiciel, qui crée automatiquement une autre page HTML. Cette page désigne l'image et inscrit le code HTML pour réaliser l'hyperimage. Ce procédé est semblable dans beaucoup d'autres logiciels pour ordinogrammes.

Dans ce cas, le logiciel a inclus le nom peu avenant du fichier d'ordinogramme en haut de l'image. Il était donc nécessaire de l'effacer en Photoshop. Aussi l'image présentait de grandes marges blanches qui l´a rendue inutilement grande du point de vue de pixels et de mémoire, Tous ces problèmes ont été résolus facilement dans Photoshop en coupant les marges. Ce changement de l'image dans Photoshop a pourtant eu pour résultat que l'hyperimage (code HTML) créée par iGrafx est devenue invalide. Voilà un cas où une bonne connaissance de HTML s'avérait une compétance précieuse. La solution de ce problème s'est montrée assez facile mais elle a demandé qu'on comprenne comment les hyperimages se créent à l'aide de HTML.

Le code HTML que j'ai écrit pour l'hyperimage (ordinogramme) ci-dessus est:

 <table width="100%">
 <tr><td align=center>


 <IMG SRC="treenav.gif" BORDER=0 USEMAP="#LINKMAP1">
 <MAP NAME="LINKMAP1">
 <AREA SHAPE="RECT" COORDS="282,75,498,105" HREF="effect.html">
 <AREA SHAPE="RECT" COORDS="290,195,510,230" HREF="co-operation.html">
 <AREA SHAPE="RECT" COORDS="60,275,245,340" HREF="water.html">
 <AREA SHAPE="RECT" COORDS="405,320,610,365" HREF="clean.html">
 <AREA SHAPE="RECT" COORDS="165,438,395,490" HREF="organic.html">
 <AREA SHAPE="RECT" COORDS="410,475,625,520" HREF="eco.html">
 </MAP>

 </td></tr>
 </table>

D'abord, l'image de l'ordinogramme est référencée à l'aide de l´étiquette <IMG SRC=¨****¨ BORDER=O USEMAP=¨¨****¨¨>. Notez que l'attribut USEMAP=¨¨****¨¨indique un nom pour l'image. Ce nom est à votre choix, mais vous devez inclure le symbole # avant le nom.

Ensuite, on doit insérer l´étiquette <MAP NAME=¨¨****¨¨> qui dit à l'explorateur qu'une hyperimage suivra. L'attribut NAME=¨¨****¨¨ indique l'image qui sera mappé. Le nom que vous avez choisi dans l´étiquette <IMG SRC> pour l'attribut USEMAP=¨¨****¨¨ se place ici, mais sans le symbole # avant le nom.

Pour chaque lien sur une hyperimage l´étiquette suivante doit être complétée: <AREA SHAPE= ¨****¨ COORDS= ¨****¨ HREF= ¨****¨> . Remarquez qu'il faut toujours avoir trois attributs dans l´étiquette <AREA>.

• L'attribut SHAPE= ¨****¨¨ indique à l'explorateur si la forme sera ¨ RECT ¨, qui signifie rectangle, ¨ CERCLE ¨ ou ¨ POLY ¨, qui veut dire polygon.
• Les coordonnées pixel, citées après l'attribut COORDS= ¨****¨, détermineront la grandeur de la zone et son emplacement sur l'image. Chaque point sur une image comprend une coordonnée pixel X et une Y. Remarquez que dans le code HTML ci-dessus il y a quatre coordonées. Ce sont deux ensembles de coordonnées X-Y. Les deux premières coordonnées désignent le coin supérieur gauche du rectangle tandisque la seconde paire indique le coin inférieur droit. Avec cette information l'explorateur peut créer une région rectangulaire. Pour faire des cercles, on a besoin des coordonnées X-Y pour le centre du cercle ainsi que du rayon désiré (en pixels). Pour un polygon, l'utilisateur peut entrer n'importe combien de points X-Y. L'explorateur reliera ensuite tous ces points.
• Après l'attribut HREF= ¨****¨ référencez un lien tout simplement comme d´habitude.

La tâche la plus difficile dans la création d'une hyperimage est celle d'obtenir les coordonnées nécessaires pour référencer la bonne zone sur l'image. La meilleure façon de le faire est d'ouvrir l'image dans un logiciel de traitement graphique tel que Adobe Photoshop ou Paint Shop Pro. Ces programmes vous donneront les coordonnées pixel de la position de votre souris quand l'image sera ouverte. Placez tout simplement la souris sur le point pour lequel vous voulez des coordonnéees et inscrivez les coordonnéees dans votre code HTML. On peut aussi l'accomplir par expérience, en allant du code HTML à une visualisation de l'image à l'avance dans un navigateur, mais cela prend un peu plus de temps.

Le logiciel d'ordinogramme utilisé pour créer l'image ci-dessus était utile pour deux raisons importantes. Tout d'abord, il m'a permis de créer un ordinogramme qui a l'air beaucoup plus attrayant que n'importe quoi que je pourrais créer à l'aide d'un code HTML tout seul. Deuxièment, il a converti l'ordinogramme du format spécifié dans le logiciel en une image pour qu'on puisse l'utiliser sur un site Web. Le logiciel a aussi créé une page HTML avec code pour une hyperimage de l'image ordinogramme. Ce code, pourtant, est devenu invalide si l'on a corrigée de n'importe quelle façon, et les images malheureusement doivent souvent être corrigées pour servir sur les pages Web. Sans une connaissance du code HTML pour créer des hyperimages, cette limitation du logiciel ordinogramme aurait pu présenter de sérieux problèmes à résoudre. Mais, avec un peu de connaissance d'hyperimages, la création d'un ordinogramme, qui non seulement avait l'air bon mais servait aussi d'outil de navigation très utile, s'est avérée tâche assez simple.