Cours
gratuits: les images réactives
Le principe:
Le principe
de images cliquables ou réactives consiste à découper ou définir des zones facilement
identifiables une image et on affecte à chacune des zones que l'on a définit au paravent
un appel de lien interne ou externe. Ainsi ce principe permet de rendre un sommaire plus
attrayant car au lieu de cliquer sur du texte on pourra cliquer sur des images!
Définition des zones d'une image
réactive:
Avant toute chose vous
devez choisir une image ou vous pourrez facilement définir des zones. En effet une image
composée de plusieurs parties sera une très bonne image car facilement reconnaissable
contre l'inverse qui serait mauvaise. Pour définir chacune des vos zones de votre image
il existe trois formes géométriques possibles:
le rectangle (rect)
le cercle (circle)
le polygone (polygon)
Il existe aussi une
quatrième zone mais qui est dite inexistante car elle définit en fait la zone par
défaut. Cette zone permettra de charger une page quand une personne cliquera hors des
zones que vous aurez définit. Cette page pourra par exemple avertir à votre visiteur
qu'il a fait une erreur de pointage.
Pour chaque forme géométrique on définira des coordonnées
différents. En effet pour un rectangle on définira les coordonnées des extrémités de
la diagonale principale, pour un cercle les coordonnées du centre suivies de la valeur du
rayon et enfin pour le polygon les coordonnées des points successifs.
Astuces: Quand vous réalisez votre image,
repérez les coordonnées exprimés en pixels des points que vous choisirez pour réaliser
votre image cliquable. Mais si vous préférez prendre une image toute faite vous pouvez
connaître les coordonnées de vos points avec le très bon Paint Shop Pro 6.
|
Les
coordonnés seront stocker sous forme de table dans un conteneur qui s'appelle
<MAP="nom">...</MAP>. On trouvera autant de marqueur <AREA>
qu'il y aura de zones sensibles à définir. Par exemple:
L'image
réactive sera chargée comme une image normale, par un marqueur <IMG> dans lequel
on aura ajouté un attribut USEMAP suivit du nom de la table descriptive des zones
sensibles (du conteneur <MAP>...</MAP>. Voici un exemple: Cliquez là
Cette page vous a aidé, alors aidez
moi en cliquant sur mes sponsors. Merci d'avance!
ClickFR Reseau Publicitaire Francophone
|
L'actualité
Les jeux PC
Copyright TheCoolPage©2000