Comment créer une carte cliquable
Page 1 sur 1
Comment créer une carte cliquable
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 :
En cliquant sur le nord on aura cette image :
et sur le sud :
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).
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 :
On valide, la boite de dialogue précédente montre à droite le lien correspondant à la première zone cliquable :
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 :
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).
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
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 :
En cliquant sur le nord on aura cette image :
et sur le sud :
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).
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 :
On valide, la boite de dialogue précédente montre à droite le lien correspondant à la première zone cliquable :
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 :
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).
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
Bellarose- Admin
Sujets similaires
» Comment créer une ombre portée
» Créer un code barre
» Comment faire l'effet IPod
» Comment faire un effet Pop-Art
» Comment gérer les calques
» Créer un code barre
» Comment faire l'effet IPod
» Comment faire un effet Pop-Art
» Comment gérer les calques
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|