Insérer des liens dans une image est un vieux truc de codeur html. Comme je n’y connais rien en code, car ce n’est pas mon métier, je préfère externaliser le code avec des services en ligne. Exemple : ce service que j’ai testé il y a bien longtemps : html-map.com et que je viens de le réutiliser pour mon dernier billet sur le pdf.
Ce service est on ne peut plus simple d’utilisation. Il permet d’insérer des liens dans une image et tout ça sans bien connaître du tout en code html. A titre d’exemple voilà l’image suivante qui possède 4 liens. Il suffit de cliquer sur les icones et bien sûr sur le gros roget.biz inscrit sur ma tablette. Pratique non?
Sympa non?
Mode d’emploi
- Envoyer une image sur votre blog et récupérez l’url. Vous pouvez également héberger votre photo sur des sites comme dropbox, tumblr ou blogger…
- Rendez-vous sur le site : html-map.com et coller le lien url de la photo (1) et appuyez sur start (2).
- Sélectionner une zone de l’image (3)
- Entrer l’url qui correspond à la zone sélectionnée (4) : dans mon exemple j’ai mis en lien vers twitter.
- Entrer optionnellement une balise Alt (5) : quand la souris va passer sur le lien on aura une petite info qui va apparaître.
- Informer si le lien doit s’ouvrir une nouvelle fenêtre ou rester dans la même fenêtre (same window, new window) (6).
- Répéter les opérations sur d’autres zone (3) (4), (5) (6), pour autant de liens que vous voulez mettre dans l’image.
- Et récupérer le code. « click here to finish ».
- Récupérer le code (7) : « html map code » et colle le à l’endroit qui va bien dans votre blogue. (sélectionner le mode html).
- Si vous êtes puriste: ajouter le code CSS Map dans votre fueille CSS, mais ce n’est pas obligatoire.
Voilà c’est fini. Je trouve cet outil plutôt pratique. De plus, tout est hébergé sur votre propre blogue, il n’y a pas donc pas à se soucier de voir le code disparaître.
A quoi ça sert?
Quelques exemples :
- Créer une carte géographique avec un lien vers les photos du lieu en question.
- Créer une carte de visite originale numérique avec seulement une photo et les icones comme j’ai fait pour l’exemple.
- Faire des modes d’emplois avec des aides sur la photo qui renvoi à un texte explicatif…
- Faire mumuse.
- Comprendre le code html pour faire la même chose sans l’outil.
html-map.com
0.5
Bonjour,
J’ai copié le code tout est ok mais lorsque je copie paste sur mon facebook l’image apparait mais aussi tout le code aussi !!!!
merci pour votre retour
@caroline, en effet ça ne marche pas pour facebook, car il ne comprend pas le code html comme ça. Donc impossible … Dommage
HTML-Map me répond que l’url de l’image n’est pas valide. Que faire ?
https://www.dropbox.com/home?preview=10256370_535883539861445_3009704675093235591_n.png
Un grand merci, je me servais de feu Adobe Page Mill pour créer des liens dans les images, mais je n’ai pas pu l’installer sur Windows 7, comme un certain nombre d’anciens logiciels
@camille content que cette petite asctuce te plaise,
je fait exactement ca et ca ne marche pas
je fait la meme operation pour chaque case
@philippe t’as tout compris, d’ailleurs, je relis le billet et j’ai mis une petite animation videogif pour que tu comprennes mieux le principe.
@donc il faut renseigner le point 4 : enter url link.
oui mai si je selectionne 2 3 4 ou5 case sur la photo la derniere ne passe pas en rouge et une fenetre s’ouvre ou il est ecrit
some of the areas you selected don’t have links attached to them
bonjour je ne comprend pas je n’arrive pas a metre plusieur lien sur la meme image
@philippe normalement tout est expliqué dans ce billet
Thierry, UN GRAND MERCI et UN GRAND BRAVO ! C’est GENIAL.
Maintenant, je souhaiterais savoir comment récupérer l’image active sur mon disque dur en gardant l’interactivité ?
Merci à vous.
Aroha.
David merci pour ton commentaire,malheureusement il n’est pas possible de récupérer l’image avec le code sur le disque dur. Pour garder l’interactivté, il faut sauvegarder l’image sur internet (garder l’url) et sauvegarder aussi le code fourni sur un fichier texte du type blocnote.
On peut le faire directement sous gimp en passant par :
Filtre > Web > Image cliquable Web
On peut y définir des zones cliquables rectangulaires, ellipsoïdales ou polygonales, inclure des code js sur les évenements onMouseover, onMouseout, onFocus et onBlur.
Ensuite on sauvegarde et on peut éditer pour copier/coller le code html au bon endroit 🙂
Y a t’il une solution pour des images en responsive…?
@jihadjo (pas compris responsive)
aaah pratique ! J’utilisais la veille methode de paint. Tu ouvres paint, tu écris ton texte (je le faisais pour mes emails et éviter les spams), puis tu enregistres sous forme d’image que tu places sur ton site !
@Animadeco avec ta méthode, il faut que l’internaute recopie le lien?
Bonsoir,
C’est à la fois très simple à mettre en pratique, utile et intéressant.
Merci pour ce tutoriel que je ne vais pas tarder à mettre en pratique!
Bon week-end
OOOhh le truc que je cherchais á faire depuis longtemps^^
Merci.
@à tous, je confirme, cet outil est bien pratique! Merci pour vos commentaires