Header

Partagez | 

[Outils] Faire une image mappée

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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 :


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.


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.


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.


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


---

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://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/header_zpsnpltzcqi.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
 Sujets similaires
-
» Comment faire une image cliquable ?
» Image de catégorie dans les sous forums
» Comment mettre l'image de description d'une catégorie/forum à gauche ?
» comment faire une chaine de midi file avec sonar
» comme faire une image survolée
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens