Associer des liens à une image

Insérer des liens dans une image 

Comme c'est toujours très compliqué à chaque fois parce que je ne connais rien en code html, j'ai préfèré rechercher un générateur avec un service en ligne. C'est une astuce pas tout à fait Blogger car elle peut en vérité servir pour tous les types d'interfaces. Ce service permet d’insérer des liens dans une image et  bien sur sans rien connaître du tout en html.  Le bonus c'est que vous allez pouvoir créér une image et plusieurs zones cliquables distinctes. On y va ?

Comment faire ? 

Direction : html-map.com

 

# Envoyer une image sur votre blog et récupérez l’url. Vous pouvez également héberger votre image sur des sites comme picasa, tumblr ou dropbox (moi j'ai choisi ce dernier)

 

# Coller le lien url de la photo (1) et appuyez sur start (2).

Ce qui donne... 

# 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 mes peintures.

# 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”.

Et enfin ...

# Récupérer le code (7) : “html map code” et colle le à l’endroit qui va bien dans votre blog.

# Si vous êtes puriste: ajouter le code CSS Map dans votre feuille CSS, mais ce n’est pas obligatoire.

Voilà c’est fini !

Maintenant vous pourrez

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 des icones

Faire des modes d’emplois avec des aides sur la photo qui renvoi à un texte explicatif

Faire un menu avec des liens vers vos rubriques (comme notre exemple)

et ... comprendre le code html pour faire la même chose sans le site ce qui donne quelque chose comme ça :

.<div class="separator" style="clear: both; text-align: center;">

<a href="http://desi2ratum.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s1600/Nom_de_mon_image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="http://desi2ratum.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s200/Nom de mon image.jpg" width="600" /></a></div>

Bien sur cette opération n'est pas nécessaire pour intégrer un lien unique sur l'image d'un article puisque dans ce cas il suffit simplement d'utiliser l'utilitaire "associer" après avoir sélectionné la photo.

Par contre cela est incontournable pour une immage à glisser dans un widget en page d'accueil. 

A vous de voir !

Source : html-map.com

Publié par Dajaltosa