Des infobules pour images dans votre sidebar

Salut à tous.

Je fais ici une petite incursion rapide sur le blog de Rodney (qui est un peu débordé ces jours-ci)  pour vous proposer un tuto sur les infobulles.

Nativement, tout navigateur affiche des infobulles lors du passage du pointeur sur un lien. Généralement, en bon bloger qui se respecte, on fignole ces dit lien en indiquant le texte devant y figurer grâce aux balises "alt" et "title".

Le tuto du jour vous propose d'aller plus loin en créant un style propre d'infobulle avec un contenu enrichi, et personnalisable en tout les sens pour mieux rester dans le style de votre blog.

Tout d'abord il faut se connecter à son tableau de bord, onglet "mise en page", puis "modifier le code HTML".

Ensuite, placez le code CSS suivant juste avant la balise ]]></b:skin> :

/* Tooltip
----------------------------------------------- */

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font: $postTitleFont;
    font-size:85%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    color: #cccccc;
    border: 3px solid #000000;
    background: #000000; transparent

moz-opacity:0.90;
opacity: 0.90;
filter:alpha(opacity=90);

 width:170px;
}
a.tooltip:hover em span {
  position: absolute;
   top: -7px;
    left: -2px;
    height: 9px;
    width: 180px;
    background: transparent url(url de Votre image);
    margin:0;
    padding: 0;
    border: 0;
}

Remplacez le "url votre image" par une image de votre choix ou laissez le champ vide.

Cette image sert selon les cas à créer un effet vignette de BD ou tout autre effet de style.

Il suffit de jouer avec les marges pour l'ajuster.

En bleu, c'est le code pour ajuster la transparence de la bulle; le 90 signifie 90% d'opacité,

Mais réglez-le à votre guise. Attention toutefois à ajuster les 3 valeurs pour que tout s'affiche correctement sous divers navigateurs!

Enregistrez votre modèle et passons à la seconde étape. 

Deuxième étape:

Aller dans l'onglet "Éléments de page" et sélectionnez "ajouter un gadget", puis "HTML/JavaScript".

Insérez le code suivant:

<a href="URL du lien" class="tooltip"><img alt="Nom du lien" src="URL de l'image du lien"/><em>

<span></span>Texte</em></a>

Placez vos éléments au bon endroit, pensez à régler la taille de votre image, enregistrez.

Cette infobulle permet d'afficher un court texte pour présenter son lien.

On peut aussi afficher une image à la place du texte grâce à cet autre code:

<a href="URL du lien" target="blank" class="toolptip"><img alt="Nom du lien" src="url de l'image du lien"/><em><span></span>

<img width="190" src="url image infobulle" height="150"/>

</em></a>

Voilà, maintenant vous savez comment créer des infobulles personnalisées et avec un contenu enrichi.

Si vous avez des questions ou un problème, n'hésitez-pas, laissez un commentaire!

Mister aiR,

blogmaster des blogs OroO/Oro'o et Le Canrd qui Croque!