Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Les images réactives.

Les images réactives

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Introduction

Présentation

Les images réactives permettent à l'internaute de naviguer de manière plus conviviable via des liens. Une image réactives est décomposée en différentes parties permettant d'accéder à des pages différentes. Etant donné que l'utilisateur doit savoir où cliquer, les différentes parties doivent être séparées correctement.

Comment ça marche

Le webmaster défini des régions dans l'image réactive de sa page Web. Ensuite lorsque l'internaute clique dans une certaine zone de l'image réactive, le navigateur détermine l'URL associée à cette région, puis l'ouvre.

Quand utiliser les images réactives

- Lorsque les liens représentent une relation physique entre eux. (cartes géographiques)
- Lorsque vous voulez que les utilisateurs puissent aller à des endroits importants de votre site à n'importe quel moment. (barre d'outils)
- Lorsque que vous voulez rendre votre site internet plus consistant. (navigation)

Quand ne pas utiliser les images réactives

Ne pas oublier les navigateurs non graphique (Lynx) ou que certains désactivent l'affichage des images. Il faut donc fournir un texte alternatif aux images.

Création des images réactives

Syntaxe

Une image réactive est définie par les balises <map> et </map>. Pour faire référence à la définition de l'image réactive plus tard, donnez-lui un nom en utilisant l'attribut name.

<map name="nomdelamap">

            <area [shape="forme"] coords="x,y,..." [href="URL"] [nohref]>

            </map>

La balise <area> permet de définir chaque région. Les attributs de la balise <area> sont les suivants :
- shape : permet de définir la forme d'une région. Vous pouvez utiliser les valeurs suivantes : rect, poly, circle, default. Lorsque deux régions se superposent, le navigateur utilise la première de la liste.
- coords : définit une liste de coordonnées séparées par une virgule de la région.
- href : définit l'URL de la ressource internet à laquelle la région est liée.
- nohref : indique que la région est une zone qui n'est liée à aucune ressource internet.

Pour référencer une image réactive une fois celle-ci construite, vous devez utiliser la balise suivante :

<img src="monimage.gif" usemap="#nomdelamap">

L'attribut usemap spécifie le nom de la map définie avant.

Exemple

Source	Résultat
`<map name="mamap"> <area shape="rect" coords="0,0,50,50" href="news.htm"> <area shape="rect" coords="51,0,100,50" href="contact.htm"> <area shape="rect" coords="101,0,150,50" href="apropos.htm"> </map> <img src="monimage.gif" usemap="#mamap">`

Remarque

Si vous souhaitez prendre en compte les navigateurs qui ne supportent pas les images réactives, utilisez :

<a href="menutexte.htm"><img src="monimage.gif" usemap="#nomdelamap"></a>

Ainsi, si l'utilisateur clique sur l'image, il verra un menu texte lui permettant de choisir une URL.

Alternatives aux images réactives

Images morcellées

Vous pouvez diviser votre image en plusieurs images plus petites. Ensuite, il suffit de faire apparaître vos images comme une seule image sans oublier d'associer un lien à chacune de vos images. Pensez à préciser la taille de vos images et à enlever les bordures.

Exemple :

<a href="lien1.jpg"><img src="img1.jpg" width="50" height="40" border="0"></a>

            <a href="lien2.jpg"><img src="img2.jpg" width="50" height="40" border="0"></a>

            <br>

            <a href="lien1.jpg"><img src="img1.jpg" width="10" height="30" border="0"></a>

Texte de rechange

Si votre page d'accueil est composée de seulement une image réactive, pensez à fournir une page d'accueil séparée pour ceux qui désactivent l'affichage des images et pour ceux qui ne peuvent pas les afficher. Vous pouvez aussi fournir ces liens, permettant d'accéder à ces différentes pages, au bas de votre page d'accueil.

Scripts

Vous pouvez utiliser du JavaScript pour créer des images réactives. En fait, vous associez un script à l'image qui se chargera d'ouvrir une URL différente en fonction de la zone cliquée par l'utilisateur dans cette image réactive.