communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Intermédiaire] Créer des zones cliquables dans une image

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: [Intermédiaire] Créer des zones cliquables dans une image   Mer 30 Nov 2011, 18:31


Bonjour,

Dans ce tuto nous allons voir comment insérer des liens url dans certaines zones d’une image et cela afin de pouvoir être renvoyé à ces adresses quand on cliquera dessus. Vous l’aurez compris, vous pouvez donc insérer un lien vers une image ou vers un site internet dans une image.

Cliquez sur le département des Bouches du Rhône :











Avant de commencer : il est important que toutes vos images soient dans le même dossier, je parle de l’image sur laquelle vous allez vous appuyer, mais aussi des images vers lesquelles vous voulez que les liens envoient.
Il vous faut héberger toutes les images que vous voulez utiliser, pour obtenir un lien « direct » sans balises, que vous insérerez dans l’image.

Ouvrez l’image dans laquelle vous voulez insérer des liens. J’ai choisi une carte des départements de France.
Allez dans « Filtres / Web / Image cliquable web », une fenêtre s’ouvre alors dans laquelle vous allez devoir délimiter les zones et y définir les liens que vous voulez insérer :

Observation de la fenêtre Image Map: regardons de plus près cette nouvelle fenêtre.


  • A gauche, vous avez les outils de sélection qui vont vous permettre de tracer les zones :
    Spoiler:
     

    1) Rectangle : sélection rectangulaire
    2)  Cercle : sélection circulaire
    3)  Polygone : sélection polygonale (ça marche comme pour le « lasso », vous placez à la main les points qui vont former la zone)
  • A droite, vous avez la fenêtre où vont apparaître les liens une fois associés à chaque zone de l’image :

    1)  Faire remonter la zone sélectionnée dans la fenêtre
    2)  Faire descendre la zone sélectionnée dans la fenêtre
    3)  Editer l’information de la zone sélectionnée
    4)  Supprimer la zone sélectionnée
  • En haut vous avez le « menu rapide » (qui selon moi, ne sert pas à grand chose…) :

    Il va vous permettre de :
    - ouvrir un fichier
    - enregistrer
    - paramétrer vos préférences
    - annuler l’action
    - rétablir l’action
    - couper
    - copier
    - coller
    - zoomer en avant (utile pour créer parfaitement des zones sur l’image)
    - zoomer en arrière (pour voir l’image dans son intégralité)
    - éditer l’information de la carte (pour changer le nom d’image, le nom de son auteur, le format dans lequel elle sera exportée… Cela n’est pas d’un grand intérêt, donc n’y touchez pas car on fera ça en sauvegardant normalement l’image)
    - déplacer vers l’avant (faire passer une zone sur une autre)
    - déplacer vers l’arrière (l’inverse)
    - créer une grille (pas d’un grand intérêt non plus…)


Créer une zone et insérer un lien url : maintenant passons à la pratique.
1) Tracez une zone où vous voulez sur votre image (moi j’ai fait un rectangle autour du département des Bouches du Rhône)
2) Double-cliquez dessus l'un des points de la zone pour valider la zone
3) Dans la fenêtre qui s’ouvre sélectionnez bien « Site web » dans « Type de lien » et collez le lien url du site ou, comme dans mon cas, de l’image que vous voulez insérer :
4) Cliquez sur « Appliquer », le lien url de cette zone va alors s’afficher dans la fenêtre des liens, pour la zone que vous êtes en train de paramétrer (la 1° dans mon cas), puis cliquez sur « ok »

Faites de même pour toutes les zones que vous voulez créer.

Quand vous avez crée toutes vos zones et qu’elles ont bien leur lien url, enregistrez votre image cliquable en format html (Fichier / Enregistrer sous ») et dans le dossier où se trouve toutes les images que vous avez utilisées.
Exemple : « Départements.html »


Modifier le fichier html de l’image cliquable : Il est nécessaire d’indiquer le lien url de l’image utilisée dans le code html de votre image cliquable, car sinon ça ne marchera pas !
En clair, dans le fichier html que vous venez de créer, il y a une ligne qui parle de votre image, mais celle-ci porte simplement le nom de votre image et non son lien url, du coup sur le net ça ne fonctionnera pas…

1) Ouvrez votre fichier html avec un éditeur de texte (Bloc-note ou WordPad), en faisant « ouvrir avec ». J’obtiens ceci :
Spoiler:
 

Décryptage :
- balise image, permet d'insérer une image
Code:
<img>
- attribut src (source) détermine le chemin de l'image à insérer
- width représente la longueur de l'image et height la hauteur
- border laisse un espace entre votre image et le reste
- pour chaque zone crée, correspond une ligne, celle-ci est celle de la zone des Bouches du Rhône   :
Code:
<area shape="rect" coords="340,407,399,447" href="http://dl.dropbox.com/u/61783854/2%29%20Tutos/3%29%20Graphisme/24%29%20Tuto%20Cr%C3%A9er%20des%20zones%20cliquables/Une%20plage%20%28640x491%29.jpg" />
- Area shape c'est la forme de sélection choisie
- coords c'est la position des points de la zone sur l'image
- l'attribut href détermine l'adresse url de destination

2) Insérer le lien url de l'image que vous voulez voir ouvrir. Ce qui nous intéresse, c’est donc ça => l’attribut src (source) qui détermine le chemin de l'image à insérer :
Code:
src="departements.jpg"


A la place du nom de votre image « departements.jpg », collez son lien url (que vous obtenez en hébergeant l’image) :
Code:
src=" http://dl.dropbox.com/u/61783854/Tutos/3%29%20Graphisme/24%29%20Tuto%20Cr%C3%A9er%20des%20zones%20cliquables/departements.jpg "


Surtout conservez bien les guillemets, ne laissez pas d’espace entre le lien url et les guillemets et ne touchez pas à la taille de votre image :
Code:
width="519" height="527"

Enregistrez les changements et copiez-collez le code où vous le souhaitez.

Conseils :
- Zoomez bien sur votre image avant de sélectionner un outil de sélection, sinon il va vous créer votre 1°point…
-  Si vous vous êtes trompé lorsque vous avez posé l’un de vos points, double-cliquez dessus pour créer quand même la zone et supprimez-la
- Ne fermez la fenêtre de création de zones cliquables que lorsque vous êtes sûr d’avoir fini, car vous ne pourrez pas y revenir plus tard, même en sauvegardant en xcf
- Ne changez pas la taille de l’image cliquable après avoir inséré les liens, car les zones crées elles ne changeront. Du coup, vous vous retrouverez avec des zones cliquables qui ne correspondront plus à votre image…


En espérant que ce tuto vous soit utile. Wink


MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Dernière édition par Maripiou le Ven 29 Juin 2012, 12:07, édité 2 fois
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Ange gardien
avatar
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 30

MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   Mer 30 Nov 2011, 19:10

Super! Merci Marie


Revenir en haut Aller en bas
http://www.dressingresponsable.com
Grand artiste du pinceau
avatar
Camelya
Grand artiste du pinceau
Féminin Date d'inscription : 06/05/2011
Age : 26
Localisation : Dans mon lit.

MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   Mer 30 Nov 2011, 19:56

Merci beaucoup Maripiou
Revenir en haut Aller en bas
http://legrenierdetatacamy.jimdo.com/
Ange gardien
avatar
Bettyboopjade
Ange gardien
Féminin Date d'inscription : 25/03/2011
Age : 35
Localisation : Mons (Belgique)

MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   Mer 30 Nov 2011, 20:00

Merci beaucoup Maripiou ! Very Happy
Revenir en haut Aller en bas
http://bettyboopjade.canalblog.com/
Poseur d'avant-garde
avatar
Caroline
Poseur d'avant-garde
Féminin Date d'inscription : 11/07/2011
Age : 34
Localisation : Bordeaux

MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   Mer 30 Nov 2011, 20:06

Je te remercie Maripiou Smile .
En plus, j'ai tout compris du premier coup ce qui est assez exceptionnel pour mon cas cheers Very Happy
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   Mer 30 Nov 2011, 20:08

De rien les filles. Wink

Je suis contente que mon tuto soit clair alors. Very Happy
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Illustre illustrateur
avatar
amylet
Illustre illustrateur
Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   Ven 09 Nov 2012, 11:36

Merci beaucoup Maripiou Smile
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Contenu sponsorisé


MessageSujet: Re: [Intermédiaire] Créer des zones cliquables dans une image   

Revenir en haut Aller en bas
 
[Intermédiaire] Créer des zones cliquables dans une image
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Import japon via intermédiaire
» [Tuto - Intermédiaire] Luffy By Luffy-Kun [Photoshop]
» Intermédiaire Paypal
» recherche d'un intermédiaire pour achat en chine :)
» Zombie Deck (intermédiaire) => besoin de vos conseils

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Graphisme :: The Gimp-
Sauter vers: