Faire une image cliquable qui renvoie vers un site ou un message ?
Dans l'absolu, ce n'est pas compliqué :
<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
Si vous avez besoin que je vous décortique l'affaire :
1 - Hébergement de l'image
Il vous faut commencer par choisir l'image qui servira de lien sur votre blog.
Ensuite il vous faut cliquer sur le lien Insérer une image.
Positionner l'image au bon endroit.
Puis dimensionner l'image à la taille désirée.
Une fois tout ceci réalisé vous devez avoir une image telle que celle çi :
Si je regarde ce que j'obtiens par l'onglet HTML, j'ai le résultat suivant :
<div class="separator" style="clear: both; text-align: center;">2 - URL de l'image
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" width="200" /></a></div>
Dans ce que j'ai obtenu plus haut ce qui m'intéresse c'est l'adresse précise de l'hébergement de l'image, sa dimension et son nom, ce sont les données suivantes :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" width="200" /></a></div>
Je retiens donc ceci :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg
3 - URL du site de destination
Il me faut trouver l'adresse précise (URL) vers lequel je veux que mon image pointe.
Pour l'exercice, je veux que mon image pointe vers mon blog :
4 - Message sur l'imagehttp://mestrucspourblogger.blogspot.com/
Je dois réfléchir au message que je veux voir affiché lorsque mes lecteurs survoleront cette image.
Je pense qu'il est souhaitable de leur indiquer l'action offerte et le résultat.
En l'occurence :
Pour accéder à Mes trucs pour Blogger
me semble un bon compromis.
5 - Et voici le résultat
Je reprends ma proposition du début :
<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
et je remplace avec les données précédemment mises de côté.
Ce qui donnera au final :
<a href="http://www.mestrucspourblogger.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-ufUfOs6bwaJWfKUYZMSchCF6dLfHnv1sBts-ZYFK8nuBFOa9cV7lxGb9wCpGxJw7kYLhNB5GhGVXkNvO6dyC1LDwtv_49hEO7z77c7u-KU_aQFGYLmFBrFdoISK83ptaF08TuUIJjn0/s200/boite_outils.jpg" title="Pour accéder à Mes trucs pour Blogger" /></a>
soit en image cliquable le résultat suivant :
Quelle utilisation pour tout ceci ?
On pense bien évidemment aux colonnes de widget où des affichages peuvent être égayés de cette manière si on veut faire des présentations personnelles sur une extraction de ses libellés par exemple.
On peut penser aussi à des images pour remplacer les titres des menus ou onglets.
A+
ce fait et c'est parfait
RépondreSupprimermerci
Bonjour, tout d'abord Merci pour cet article comme d'habitude très interessant.
RépondreSupprimerJ'aurai par contre aimé savoir s'il serait possible de faire un tuto sur comment obtenir plusiseurs liens différents sur une même image. je pense plutôt à une utilisation de type bannière comme ici ( http://youtube.com/mymou) il s'agit de ma chaine youtube mais jusqu'ici j'avais utilisé un site qui me permettait de cibler les endroits que je voulais rendre cliquable sur la bannière et donc appliquer le lien. Seulement ce site fonctionne une fois sur 5 alors ce n'est pas évident.
ET voulant me servir du même principe sur mon blog une bannière renvoyant vers différents autres réseaux sociaux un tutoriel serait vraiment le bienvenue. Si tant est que ce soit réalisable bien sur.
merci encore
Bonjour Mymou,
SupprimerDésolé je ne paux vous aider mais vous pouvez peut être. Pouvez vous me donner le nom du site même si il marche qu'une fois sur 5 ?
Merci d'avance,
Quentin
Merci de la réponse
RépondreSupprimerBonjour,
RépondreSupprimerProblème d'images qui disparaissent dans certains posts, un triangle gris avec un point d'exclamation à l'intérieur. Comment récupérer les photos que je n'ai pas stocké par ailleurs (oups !). L'affichage du triangle est semble-t-il aléatoire, pas à partir d'une date.
Merci de votre réponse...
Je n'ai pas trouvé le post pour ce type de problème !
A très bientôt je l'espère !
Bonjour Anne-Marie,
SupprimerVos photos sont hébergées sur Picasa Album Web.
https://picasaweb.google.com/home?hl=fr
Si elles y sont, vous pouvez les republier.
Si elles ont disparues, une des raisons peut provenir du fait que l'album ait été supprimé. Cela est courant si on pratique cette opération depuis Google+
Bonjour,
RépondreSupprimerJe vais j'en ai bien peur poser la même question que mymou (pas de réponse pour l'instant ?), je voudrais en fait mettre au tout début de mon blog un plan ou je présenterais l'endroit où on été prise mes photos (toujours aux mêmes endroits chaque jour). Est il possible d'intégrer plusieurs liens sur ce plan qui renvoierait à mes différents libellés (qui serait dans ce cas plus des locations que des thèmes) ?
Merci d'avance,
Quentin
Bonjour et bravo pour votre blog.
RépondreSupprimerJ'ai un soucis lié à la consultation des images :
Sur mon blog, je ne veux pas passer par une visionneuse, et je propose sur certaines pages la visualisation d'une dizaine de photos.
Si j'utilise Firefox, en cliquant sur le bouton gauche de la souris, les images défilent : c'est ce que je veux.
Si j'utilise IE8, j'ai le même résultat.
MAIS, si IE9 est utilisé, ce même résultat s'obtient en cliquant sur la mollette. Si on clique sur le bouton gauche, l'image est agrandie via un lien en bp.blogspot et on doit revenir sur chaque photo pour les agrandir. On voit nettement s'afficher la liste des photos comme sur FF ou IE8 mais cela disparait subitement au profit de ce lien bp.blogspot. J'aimerais uniformiser le tout pour l'utilisateur avec un rendu FF / IE8 et non IE9. MERCI pour vos conseils.
Bonjour,
RépondreSupprimerje sais que je ne suis pas tout à fait au bon endroit, mais je débute sur blogger (ex overblog) et les images transparentes (gif ou png) que j'avais l'habitude d'insérer sans pb, apparaissent sur blogger avec un cadre autour, en clair elles perdent leur transparence. Pouvez vous me dire comment faire pour retrouver cette possibilité.
Merci d'avance
Bonjour,
RépondreSupprimerje ne sais trop où poser la question mais je souhaiterais intégrer dans l'une de mes pages des images qui sont très grandes sur la hauteur et assez courtes sur la largeur. Le format est accepté mais lorsque je clique sur mon image, elle reste assez petite, même si je la mets en taille originale qui elle fait 20 sur 108 cm. J'aimerais voir apparaître à l'écran mon image en grand format pour pouvoir la défiler de haut en bas.
Je ne sais pas vraiment si je suis claire...
Merci de votre réponse !
Houlà! bon, ne faites pas attention à mon précédent commentaire, j'ai trouvé ma réponse :)
RépondreSupprimerC'est un peu complexe, mais je pense y arriver!
Merci pour toutes ces expliquations!
Bonjour,
RépondreSupprimerJe débute sur blogger et j'essaie en vain d'insérer un bouton cliquable "contactez-moi" sur mon blog, qui renvoie vers un formulaire que j'ai créé.
En fait, j'ai créé une page "contactez-moi" qui contient le formulaire, mais je souhaite la remplacer par ce bouton.
Je ne comprends pas où insérer l'image (dans un gadget ?) et quel type de lien je dois mettre pour pointer vers mon formulaire (si je supprime par la suite ma page "contactez-moi", je n'ai donc plus de formulaire ?!)
Merci de votre réponse !
Bonsoir! J'aurais aimé vous faire part d'une autre technique qui ne nécessite pas de mettre le nez dans le code html.
RépondreSupprimerIl suffit, alors qu'on rédige un article, de sélectionner l'image de notre post, de cliquer sur "associer" et de rentrer l'url dans la case prévue. Pour rajouter une info-bulle, il faut cliquer sur l'image, puis sur propriété (dans la barre qui s'affiche en dessous) puis rentrer son texte dans la case "titre" de la fenêtre qui apparaît.
Par contre, ça ne marche que pour les pages ou articles. Pour les widgets, il faut utiliser votre technique.
Mais, voilà, je pense que ça pourrait être intéressant de le rajouter à votre article, pour ceux qui sont allergiques au code, ^^
Bonjour,
SupprimerOui, merci. C'est ce que présente cet article : http://mestrucspourblogger.blogspot.fr/2012/04/realiser-une-image-cliquable.html
c'était un peu chaud, mais j'y suis arrivé!!! merci!
RépondreSupprimerBonjour, j'ai réalisé deux blogs grâce à votre travail et vos commentaires avisés. Je vous remercie et votre blog reste le meilleur ami des deux miens !
RépondreSupprimer