Créer une image réactive

par **Threax** le Dim 19 Avr 2009 - 10:46

Créer une image réactive

1) La définition

Une image réactive est une image divisée en plusieurs zones pointant vers différents documents.

2) La partie graphique

A l'aide d'un logiciel du type Photoshop ou PhotoFiltre, ajoutez sur une image de base des mots, des textes ou d'autres images (plus petites) qui deviendront par la suite (voir méthode ci-après) des liens, sauf si vous disposez déjà d'une image prête à l'emploi.

Afin d'illustrer ce tutoriel, nous utiliserons cette image :

Largeur (width)	489
Hauteur (height)	324
Adresse (URL)	http://img14.imageshack.us/img14/9007/imagemap.jpg

Nous créerons 2 liens, délimités ainsi :

3) Les "mesures"

Vous devez définir les formes invisibles - car elles ne s'afficheront à aucun moment - qui encadreront les mots, les textes ou les images plus petites afin que ceux-ci deviennent des liens actifs. Ces formes sont ce qu'on appelle des zones. Il existe ainsi 3 zones différentes : la zone rectangulaire, la zone circulaire et la zone polygonale. Libre à vous d'utiliser la zone de votre choix, sachant toutefois que plus celle-ci colle à votre mot, votre texte ou votre image, plus l'effet sera réussi.

Une fois votre choix arrêté, vous devez calculer les coordonnées des points particuliers de ces zones afin de les créer.

Vous pouvez utiliser PixelRuler pour calculer ces coordonnées : http://www.infos-du-net.com/telecharger/Pixel-Ruler,0301-5594.html

a) La zone rectangulaire

C'est celle qui est la plus usitée. Elle est très facile à déterminer puisqu'il suffit de calculer deux coordonnées : celles des 2 points opposés du rectangle (le coin supérieur gauche et le coin inférieur droit).

L'attribut coords prend alors pour valeurs ces deux coordonnées :

Code:: coords="x1,y1,x2,y2"

(x1,y1) étant les coordonnées du coin supérieur gauche et (x2,y2) celles du coin inférieur droit de l'encadrement du mot, du texte ou de l'image.

La syntaxe sera :

Code:: <area shape="rect" title="VOTRE TITRE" coords="x1,y1,x2,y2" href="ADRESSE DE LA PAGE">

Dans notre exemple, nous ne pouvons pas user de la zone rectangulaire. En effet, malgré ce que vous pourriez croire de prime abord, le cadre autour du texte "Come As You Are" est en fait défini par une zone polygonale (voir point c plus loin). Pour pouvoir utiliser la zone rectangulaire, il aurait fallu que chaque côté du rectangle ainsi formé soit parallèle au côté de l'image correspondant, ce qui n'est pas le cas, le panneau de l'image étant légèrement penché.

b) La zone circulaire

Les points particuliers de cette zone sont son centre et son rayon.

L'attribut coords prend alors pour valeurs l'abscisse et l'ordonnée du centre du cercle et son rayon :

Code:: coords="x,y,rayon"

La syntaxe sera :

Code:: <area shape="circle" title="VOTRE TITRE" coords="x,y,rayon" href="ADRESSE DE LA PAGE">

Dans notre exemple, cela donne :

Calcul de x	Spoiler:
Calcul de y	Spoiler:
Calcul du rayon	Spoiler:
Coordonnées obtenues	Code: `coords="240,28,24"`

c) La zone polygonale

Les points particuliers de cette zone sont tous les points que vous souhaitez définir (c'est vous qui décidez).

L'attribut coords prend alors pour valeurs les abscisse et ordonnée de chacun de ces points :

Code:: coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x10,y10,...,x1,y1"

La syntaxe sera :

Code:: <area shape="poly" title="VOTRE TITRE" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x10,y10,...,x1,y1" href="ADRESSE DE LA PAGE">

Comme vous le voyez, on retourne au point de départ (x1,y1) à la façon de ces jeux que l'on trouve dans les journaux et dont il faut relier chacun des points afin de faire apparaître un dessin.

C'est grâce à cette méthode que l'on crée notamment les cartes géographiques interactives.

Dans notre exemple, cela donne :

Calcul de x1	Spoiler:
Calcul de y1	Spoiler:
Calcul de x2	Spoiler:
Calcul de y2	Spoiler:
Calcul de x3	Spoiler:
Calcul de y3	Spoiler:
Calcul de x4	Spoiler:
Calcul de y4	Spoiler:
Coordonnées obtenues	Code: `coords="149,235,348,226,349,250,150,258,149,235"`

4) Le code HTML

Le code permettant d'afficher une image réactive est de ce type :

Code:: <img usemap="#page_d_accueil" src="ADRESSE DE L'IMAGE" width="LARGEUR DE L'IMAGE" height="HAUTEUR DE L'IMAGE" border="0"> <map name="page_d_accueil"> <area shape="rect" title="VOTRE TITRE" coords="x1,y1,x2,y2" href="ADRESSE DE LA PAGE"> <area shape="circle" title="VOTRE TITRE" coords="x,y,rayon" href="ADRESSE DE LA PAGE"> <area shape="poly" title="VOTRE TITRE" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x10,y10,...,x1,y1" href="ADRESSE DE LA PAGE"> </map>

Il vous suffit de l'adapter à votre cas.

Dans notre exemple, nous obtenons :

Code:: <img usemap="#aberdeen" src="http://img14.imageshack.us/img14/9007/imagemap.jpg" width="489" height="324" border="0"> <map name="aberdeen"> <area shape="circle" title="Infos sur la ville d'Aberdeen" coords="240,28,24" href="http://fr.wikipedia.org/wiki/Aberdeen_(Washington)"> <area shape="poly" title="Chanson du même nom" coords="149,235,348,226,349,250,150,258,149,235" href="http://www.youtube.com/watch?v=bOL5cpwTkes"> </map>