mardi 3 juillet 2012

Ajouter une info bulle sur une image (Blogger)

Blogger a ajouté en avril 2012 quelques nouveautés dans l'éditeur de messages, dont la possibilité de rajouter facilement un attribut alt et un attribut title aux images.

• L'attribut alt permet d'afficher une description de l'image s'il y a un problème d'affichage.
• L'attribut title fournit une description plus longue de l'image, qui s'affiche sous forme d'info-bulle quand on passe la souris sur l'image. (à tester sur la photo ci-dessous)

Fleurs de printemps

Dans l'éditeur Blogger, après avoir téléchargé l'image, il suffit de :

1. cliquer sur l'image puis sur Propriétés


2. renseigner le texte du titre, correspondant à l'attribut TITLE, qui s'affichera sous forme d'info-bulle et le texte alternatif, correspondant à la balise ALT.


3. vérifier dans le code html que les attributs ont bien été ajoutés à la balise image (img).


4. tester l'info-bulle ;-)

► dans d'autres éditeurs html, ces attributs peuvent bien entendu être rajoutés "à la main".
► l'attribut title peut être ajouté à n'importe quelle balise html sur laquelle on voudrait faire apparaître une info-bulle, y compris sur une simple zone de texte.

Exemple : passer la souris PAR ICI

code source :
Exemple : passer la souris <span title="Test d'info-bulle">ICI</span><br />
<br />


► personnellement, il m'arrive de rajouter une info-bulle à un lien-texte, comme ci-dessous.

Sources :
Blogger : Personnalisez vos préférences de recherche (avril 2012)
Propriétés de l'image

(il faut que je réécrive une partie de mes tutoriels informatiques car tout a changé...)
Rendez-vous sur Hellocoton !

6 commentaires:

  1. Ouh la, ouh la ! Je ne savais pas tout cela moi !
    Tu m'intéresses dis donc !
    Je crois que je vais pas tarder à tester !

    Et une question : c'est quoi cette petite image (courgettes) avec le texte à côté tout en haut, juste au-dessus du titre de ton post ?
    C'est une mise en page particulière avec des gadgets des colonnes ?

    Merci pour toutes ces infos !

    RépondreSupprimer
    Réponses
    1. Teste, teste ;-)
      La courgette c'est une aubergine frite et c'est un bloc HTML/Text (un widget) que j'ai placé au-dessus des messages au lieu de le mettre dans la colonne pour qu'il soit visible pendant la durée du vote. Si tu cliques sur la "courgette", tu verras ma sublissime recette et si tu cliques sur le lien, tu pourras voter pour moi ;-)
      Note que tu n'es pas du tout obligée et que je n'ai aucune chance. Note aussi que j'avais dit que je ne participerais plus à des jeux ou à des concours ... pfffff !
      PS. Tu veux plus d'infos sur la courgette ou le bloc texte?

      Supprimer
    2. Sur le bloc texte, enfin, les infos ! ;-)
      Non, sérieusement, comment tu as fait ?
      J'ai d'abord pensé que c'était un extrait de ton post sur la recette mais apparemment, ce n'est pas ça. C'est surtout la disposition qui m'intrigue. L'image s'est mise "toute seule" à la droite du texte ? (j'ai l'air nouille avec mes questions...)

      Pour tes aubergines (pardon !), j'ai voté mais c'est vrai qu'il y a du lourd face à toi !

      Supprimer
    3. Ahhh, tu es gentille, tu m'épargnes la honte de n'avoir que ma voix ;-) Bon, de toute façon, vu la recette que j'ai proposée, c'est bon mais ce n'est ni photogénique, ni diététique... c'était surtout pour faire plaisir à ma copinaute.
      Pour la position de l'image c'est un attribut "float: right;"
      Il se met tout seul quand tu changes la position gauche - centre - droite avec l'éditeur (tu peux regarder dans le code html après) mais là comme c'est un bloc html je l'ai mis moi-même. Tu veux que j'essaie d'en faire un article ?

      Supprimer
  2. Merci pour cet éclairage très utile, que j'utiliserai certainement. En ce moment, je suis à la recherche de la barre "suivez-moi" (flux, hellocoton, pinterest). Je sais que tu as déjà fait un message mais je n'ai pas compris. A suivre ...Cela prend moins de place que les logos alignés.
    Belle journée, FLaure

    RépondreSupprimer
    Réponses
    1. Qu'appelles-tu la barre "suivez-moi" ?
      Les icônes les unes à côté des autres comme sur mon blog ?
      Si oui, il faut que je réécrive mon tuto car tu es la 2ème à ne pas avoir compris ;-)
      Tu parles de celui-là ?
      http://lestrucsdemyrtille.blogspot.fr/2011/01/afficher-un-badge-facebook-twitter-ou.html

      Supprimer