Le language HTML

Créer une image avec des zones cliquables


Utilisation de la balise <MAP> pour définir la carte.
Utilisation de la balise <AREA> pour définir les zones cliquables.
On distingue des zones rectangulaires, des zones circulaires et des zones polygonales.

Code HTML :
 
<img src="acp-logiciel.png" width="669" height="585" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="30,87,72,106" alt="Onglet acp" href="/../sthda/zoomImage.php?imagePath=sthda_images/acp-logiciel-acp.pnp" />
<area shape="rect" coords="75,88,138,105" alt="onglet resultats" href="/../sthda/zoomImage.php?imagePath=sthda_images/acp-logiciel-resultats.png" />
<area shape="rect" coords="138,88,189,107" alt="onglet HCPC" href="/../sthda/zoomImage.php?imagePath=sthda_images/acp-logiciel-hcpc.pnp" />
<area shape="rect" coords="190,89,298,106" alt="Onglet option" href="/../sthda/zoomImage.php?imagePath=sthda_images/acp-logiciel-option.pnp" />
</map>
 



Création de cartes et HTML avec THE GIMP



Installer et demarrer GIMP
Ouvrir une image : Fichier-> Ouvrir
Aller dans le menu Filtre, Web, Image Cliquable
Utiliser l'outil zone cliquable circulaire (voir le menu de gauche). Une fois l’outil sélectionné, il ne reste plus qu’à créer des rectangles autour de vos zones d'intérêt.

Notez qu’à chaque fois qu’une nouvelle zone est « dessinée », GIMP affiche une fenêtre permettant de sélectionner le lien vers lequel la zone doit pointer

Une fois l’ensemble des zones crées, il suffit maintenant d’aller dans le menu Fichier, Enregistrer Sous, et d’enregistrer votre travail au format HTML. Gimp crée automatiquement le fichier et le code HTML correspondant à votre MAP.

Enjoyed this article? I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter, Facebook or Linked In.

Show me some love with the like buttons below... Thank you and please don't forget to share and comment below!!
Avez vous aimé cet article? Je vous serais très reconnaissant si vous aidiez à sa diffusion en l'envoyant par courriel à un ami ou en le partageant sur Twitter, Facebook ou Linked In.

Montrez-moi un peu d'amour avec les like ci-dessous ... Merci et n'oubliez pas, s'il vous plaît, de partager et de commenter ci-dessous!





Cette page a été vue 4249 fois