Cocktail Web

Actualité des outils du Web



Comment Insérer des liens dans une image?

03/10/2012 ( Code is poetry ) 6 avis


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 ou si j’ai besoin d’un pro, je m’adresse à Bruno Bichet . Exemple ce service que je viens de tester  html-map.com qui est, on ne peut plus simple d’utilisation. Il  permet d’insérer des liens dans une image. 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?

thierry roget et roget.biz



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…
  • 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.
A vous de voir l’usage! En tout cas, j’ai déjà gardé ce lien dans mes favoris.

html-map.com

 

HTML Map

Tags:




Delicious Sauvegardez sur delicious! Ecrit par Thierry Roget

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

» Suivez les commentaires de ce billet par RSS

Commentaires

» Abonnez vous au flux RSS des commentaires de ce billet

Commentaire de patamouf |

OOOhh le truc que je cherchais á faire depuis longtemps^^
Merci.

Commentaire de Bruno |

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

Commentaire de Thierry Roget |

@à tous, je confirme, cet outil est bien pratique! Merci pour vos commentaires

Commentaire de Comment insérer des liens dans une image | Autour du Tuto |

[...] “Click here to finish” et copiez-collez le code qu’on vous fournitP.S : merci à Thierry de Cocktail Web pour la découverte Avez-vous déjà testé ce site ? Avez-vous déjà essayé d’insérer des [...]

Commentaire de Animadeco |

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 !

Commentaire de Thierry Roget |

@Animadeco avec ta méthode, il faut que l’internaute recopie le lien?

» Abonnez vous au flux RSS des commentaires de ce billet

Ecrire un commentaire