L'art du visuel
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
Voir le deal

Comment créer une carte cliquable

Aller en bas

Comment créer une carte cliquable Empty Comment créer une carte cliquable

Message  Bellarose Jeu 26 Mar 2009 - 0:34

Si vous avez des question au sujet de ce tutoriel ou éprouvez des problèmes, rendez-vous ici pour obtenir de l'aide.

Nous allons réaliser très simplement une carte cliquable avec Gimp. Une carte cliquable ou image map est une image dont certaines zones présentent des liens vers une image , un texte, une carte etc... Une image cliquable permet ainsi de présenter facilement des statistiques, des photos, des cartes...

Ce tutoriel peut vous paraitre long mais c’est parce qu’il est très détaillé. Ainsi même si vous ne maitrisez pas ce logiciel vous pourrez tout à fait réaliser une image map .

Dans cet exemple, nous allons réaliser une image cliquable très simple qui permettra de cliquer sur le nord ou le sud d’un département.L’image de départ :
Comment créer une carte cliquable Carte-hautes-pyrenees-cliquable-depart_Custom_1

En cliquant sur le nord on aura cette image :
Comment créer une carte cliquable Nord-image-cliquable2

et sur le sud :
Comment créer une carte cliquable Sud-image-cliquable3

Passons à la pratique : Tout d’abord, il faut mettre les différentes images dans le même dossier (plus pratique pour les chemins vers les images). On ouvre d’abord l’image qui servira au fond de l’image map avec Gimp. On lance l’interface de création d’image cliquable par filtre->web->image-cliquable (imagemap).

On obtient alors une nouvelle interface sur laquelle on va pouvoir définir les différentes zones de notre image. A gauche il y a les outils pour créer les zones cliquables (circulaire, rectangulaire ou polygone).
Comment créer une carte cliquable Zone-cliquable-polygone4

Comme on souhaite rendre cliquable le nord et le sud et que ce ne sont pas des formes simples , on va faire un tracé par polygone. On sélectionne donc l’outil "définir une zone polygonale" et on clique le long de la zone à définir. Lorsque l’on a fini de faire le contour de la zone, il faut faire un double clic (sur le dernier point) pour obtenir une boite de dialogue dans laquelle on va pouvoir mettre le lien vers l’image qui doit être affichée quand on clique sur la zone :
Comment créer une carte cliquable Boite-dialogue-zone-cliquable5

On valide, la boite de dialogue précédente montre à droite le lien correspondant à la première zone cliquable :
Comment créer une carte cliquable Premiere_zone_cliquable6
première zone cliquable

On sélectionne à nouveau l’outil polygone pour créer la seconde zone. Une fois la zone définit et le lien sur la deuxième image ajouté on obtient bien deux zones qui pointent vers nos deux images :
Comment créer une carte cliquable Deuxieme_zone_cliquable7
deuxième zone cliquable

Maintenant que les zones et les liens sont faits, il ne reste qu’a générer le code html de l’image map. Pour ça on peut enregistrer le document en faisant fichier->enregistrer-sous (dans la boite de dialogue où on a définit les zones).
Comment créer une carte cliquable Enregistrement8

Comme type de fichier on peut choisir html, on aura ainsi une page html générée automatiquement avec la carte cliquable et les liens vers les deux images. Aussi, il faut enregistrer le fichier dans le même dossier que les images pour que les liens que l’on a fait restent corrects.

Vous pouvez visualiser le résultat en cliquant sur ce lien : Le résultat n’est pas superbe (mais fonctionne parfaitement !) car les cartes ont été découpées rapidement pour l’exemple :

Résultat

Intégrer l’image à votre page web :

Si vous voulez intégrer l’image à une page web déjà existante, il faut récupérer le code de la page html pour l’intégrer à votre page. Il suffit d’ouvrir la page html avec un éditeur de texte, sélectionner le code pour le placer là ou vous le désirez. Il ne vous reste alors qu’a vérifier si les liens vers les images des zones cliquables sont encore bons. Si il ne le sont plus, il suffit de remettre les chemins (vers les images) corrects.

Quelques remarques sur le code :

Le code est d’abord composé des balises permettant l’affichage de l’image du fond (balise img src). On trouve ensuite la balise qui "ouvre" la zone cliquable. On retrouve alors les deux lignes qui correspondent aux deux zones cliquables avec les liens vers lesquels elles pointent (area shape). On trouve enfin la balise qui ferme la zone cliquable.

Pour finir :

** pour cet exemple on a fait des zones polygonales, c’est le plus dur à faire, les autres zones fonctionnent de la même façon sauf que la création des zones cliquables est beaucoup plus facile.

** Vous pouvez définir autant de zones que vous voulez et mélanger les types de zones (circulaires rectangulaires...)

A vos souris.... prêt...... cliquez Very Happy
Bellarose
Bellarose
Admin


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum