Créer sa page perso : image sensitive MAP / 11d

Généralités - Insertion et taille - Positionnement et texte - Encadrer avec texte - Image servant de lien - Sensitives MAP - Réduire poids - Se reflétant dans l'eau - Vignette lien vers grande image - Protéger les images de la copie,

Présentation de ce type d'image

Image réactives = imagesmaps ou encore clickable imagemaps.

Ce titre ne désigne pas un nouveau type d'image, mais seulement des images dont une partie est utilisée comme lien hypertexte. Nous avions déjà abordé la question des images exploitées comme boutons hypertextes. Dans ce chapitre, nous verrons comment implanter plusieurs liens hypertextes sur une même image.

Une image réactive est ainsi nommée car elle se trouve divisée en plusieurs zones qui correpondent chacune à un lien hypertexte.

Le choix de l'image est important parce qu'il doit "diriger" le visiteur par intuition sur des zones repérables et correspondre le plus possible à la cible du lien placé.

Il importe déja de savoir que les zones cliquables (en anglais hot spots =zones sensibles) peuvent se présenter sous trois formes géométriques : le rectangle, le cercle et le polygone.

Voici une image qui va servir d'exemple avec 3 zones bien distinctes.

Définitions

- Il existe deux méthodes de gestion de liens, à savoir :

- Paramètre ISMAP où l'exploitation passe par un accès à la programmation du serveur. (pour mémoire)

- Paramètre USEMAP qui fera appel au code HTML et en conséquence qui est retenu dans cette exemple.

Rappel du lien classique où l'image en entier sert pour un lien unique :

Exemple de code dans BODY

<HTML>
<BODY>
<IMG SRC="carte.gif" USEMAP="#carte"" BORDER=0 ALT="region tarn">

<MAP NAME="carte">

.....liste des trois liens.....

</MAP>

</BODY>
</HTML>

Définition des liens dans les conteneurs MAP

Chaque lien débute par le tag <AREA

suivi des instructions spécifiques à la nature de chaque forme géométrique retenue pour établir le lien.

Attributs pour définir la forme géométrique retenue pour le lien :

- shape="rect" pour définir un rectangle

- shape ="circle" pour définir un cercle

- shape="polygon" pour définir un polygone.

Coordonnées à préciser suivant la forme géométrique choisie :

- Pour le rectangle = coordonnées des extrémités de la diagonale principale.

- pour le cercle = coordonnées du centre suivies de la valeur du rayon.

- Pour le polygone = coordonnées des points successifs.

Exemple avec code dans BODY

</MAP><IMG USEMAP="#map1" SRC="v189.gif" WIDTH=131 HEIGHT=91 ALIGN=middle>

</body

</html>

Image réactive

Les Navigateurs ont des boussoles différentes ! (bis)

Et oui, malheureusement pour tout le monde, il serait trop simple que chacun de nos deux géants, Netscape et Microsoft Internet Explorer se mettent d'accord au moins pour abandonner leurs tags propriétaires, et permettre un affichage identique.C'est pourquoi si vous souhaitez porter vos pages sur le Web, je vous recommande de monter sur votre disque dur la dernière version de ces deux navigateurs, afin qu'en basculant de l'un à l'autre vous puissiez visualiser le rendu de votre travail et apporter les corrections nécessaires pour trouver un juste milieu.
henry