Header
Partagez | 

[Outils] Faire une image mappée

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [Outils] Faire une image mappée   Mer 8 Avr - 12:31

Coucou Smile

Cette fois-ci, nous allons apprendre à réaliser une image mappée.

Mais qu'est-ce que c'est ?

On appelle parfois les "images mappées" des "images cliquables". En fait, ce sont simplement des images sur lesquelles on ajoute des zones qui contiennent un lien.

Au boulot !

La préparation

Avant de réaliser ce tutoriel, il te faut :
  • une image sur laquelle tu veux ajouter des liens,
  • avoir ciblé ce que tu veux rendre cliquable et vers quoi le lien enverra l'Internaute.


Pour notre exemple, nous allons travailler sur cette image :
Image tuto

Et nous allons mettre un 2 liens cliquables :
- un sur Thiboux qui redirigera vers http://www.school-of-progress.fr
- un sur la pieuvre à droite qui redirigera vers les formations.

L'explication


On va d'abord commencer par ouvrir notre image dans Gimp (jusque là, facile ^^). Ensuite, on va aller dans Filtre >> Web >> Image cliquable web. Tu as une nouvelle fenêtre qui s'ouvre.

Image tuto

Les outils à gauche te permettent de définir une sélection :
- un rectangle/carré
- une ellipse/cercle
- une forme libre

Dans notre cas, on va choisir la forme libre Smile On clique donc dessus et on sélectionne notre chouette. Tu fais le tour d'elle en cliquant régulièrement pour poser des "ancres". Une fois ta sélection terminée, tu doubles cliques pour fermer la forme.
Une nouvelle fenêtre apparait.

Image tuto

Ici, on va laisser cocher "site web", on va décocher "lien relatif" (il est à laisser cocher si tes liens sont du genre /ma-page.html).

On va indiquer dans "URL" : http://www.school-of-progress.fr et dans le texte alternatif (= une petite infobulle qui s'affichera quand on survolera la zone avec la souris) School Of Pub.

Image tuto

Et on valide Smile Une première zone cliquable est faite.

Idea Nous ne nous attarderons pas ici sur les autres onglets, si tu as des questions, tu peux sans souci nous les poser dans la zone adéquate ^^

---

Il ne nous reste plus qu'à faire la même chose avec la pieuvre Smile

Image tuto

---

On a quasi terminé Smile

On va ensuite enregistrer (en cliquant tout simplement sur la disquette). Ici, on va sauvegarder ce fichier avec l'extension .txt au lieu de .map, juste pour que ce soit plus simple de l'ouvrir pour copier/coller le code généré.

Logiquement, si tu ouvre ton fichier txt, tu dois avoir un code qui ressemble à ça

Code:
<img src="Sans titre" width="503" height="201" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Pénélope -->
<area shape="poly" coords="98,199,98,200,102,184,102,172,103,163,107,155,115,147,127,141,148,130,158,124,166,120,186,94,183,69,176,61,151,60,138,63,115,71,116,91,106,100,95,84,92,75,79,68,76,54,84,38,82,31,60,38,43,44,35,51,24,64,9,82,12,96,18,97,25,111,29,120,34,131,35,152,35,170,28,178,19,184,13,188,21,192,28,198,35,204,62,200,83,200" alt="School Of Pub" href="http://www.school-of-progress.fr" />
<area shape="poly" coords="440,200,435,194,428,180,414,172,411,171,418,144,420,122,417,97,415,84,404,68,392,59,372,57,349,52,314,54,282,62,274,90,273,110,272,121,273,138,272,149,267,171,267,188,247,193,230,190,220,180,214,172,227,170,227,165,221,156,214,155,204,164,205,180,211,192,222,203,258,207,332,210,345,206,369,204,413,204,432,204,438,204,438,202" alt="Nos formations" href="http://www.school-of-progress.fr/c8-les-cours" />
</map>

Il te suffit ensuite de remplacer le "sans titre" ici
Code:
<img src="Sans titre" width="503" height="201" border="0" usemap="#map" />
par l'adresse de ton image, et le tour est joué.

Par exemple :

Code:
<img src="http://site.school-of-progress.fr/Tuto/mapp6.png" width="503" height="201" border="0" usemap="#map" /><!--

--><map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Pénélope
--><area shape="poly" coords="98,199,98,200,102,184,102,172,103,163,107,155,115,147,127,141,148,130,158,124,166,120,186,94,183,69,176,61,151,60,138,63,115,71,116,91,106,100,95,84,92,75,79,68,76,54,84,38,82,31,60,38,43,44,35,51,24,64,9,82,12,96,18,97,25,111,29,120,34,131,35,152,35,170,28,178,19,184,13,188,21,192,28,198,35,204,62,200,83,200" alt="School Of Pub" href="http://www.school-of-progress.fr" /><!--
--><area shape="poly" coords="440,200,435,194,428,180,414,172,411,171,418,144,420,122,417,97,415,84,404,68,392,59,372,57,349,52,314,54,282,62,274,90,273,110,272,121,273,138,272,149,267,171,267,188,247,193,230,190,220,180,214,172,227,170,227,165,221,156,214,155,204,164,205,180,211,192,222,203,258,207,332,210,345,206,369,204,413,204,432,204,438,204,438,202" alt="Nos formations" href="http://www.school-of-progress.fr/c8-les-cours" /><!--
--></map>

Et voilà le rendu :






School Of PubNos formations


Simple hein ? (c'est top pour les en-tête cliquables par exemple ^^)



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "[Gimp] Faire une image mappée" tel que je l'ai rédigé.[/i]
Revenir en haut Aller en bas
[Outils] Faire une image mappée
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: The Gimp+