[Script] Script permettant de mettre des info-bulle personnalisées très jolies
= Message =
Voici un petit script que j'ai trouvé sur internet, et que je trouve très joli, alors pour le partager avec les membres d'OnLC, j'ai posté ce message.
--> Si vous avez des commentaires, vous pouvez répondre dans la partie "répondre" de cette page de Support OnLC. <--
= Le script =
= Nécessaire =
Pour pouvoir utiliser ce script, il faut d'abord activer l'option "Editeur de thème graphique", avec allopass. Quand c'est fait, lisez la suite.
= Dans le head =
Mettez dans votre feuillez de style css, dans l'éditeur de thème graphique, entre la balise "<style type="text/css>", dans le head ce code :
a.tooltip em {
display:none;
}
a.tooltip:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
}
a.tooltip:hover em {
font-style: normal;
display: block;
position: absolute;
top: 20px;
left: -10px;
padding: 5px;
color: #000;
border: 1px solid #bbb;
background: white;
}
a.tooltip:hover em span {
position: absolute;
top: -7px;
left: 15px;
height: 7px;
width: 11px;
background: transparent url(http://img49.xooimage.com/files/e/1/3/infobulletop00-ae97bc.gif);
margin:0;
padding: 0;
border: 0;
}
Notez que vous pouvez changer la couleur du fond de l'infobulle en changeant, dans a.tooltip:hover em, la couleur de "background", qui est par défaut en blanc.
Ensuite, enregistrez et fermez l'éditeur, puis aller dans "Rédaction du site".
= Partie page web =
Choisissez la page dans laquelle vous voulez mettre l'effet, et mettez ce code :
<a href="ADRESSE_DE_DESTINATION_DU_LIEN" class="tooltip">TEXTE DU LIEN <em><span></span>Texte de l'infobulle (vous pouvez mettre en forme avec le html !)</em></a>
Une fois fait, enregistrer la page, puis visualisez-là.
Si tout fonctionne comme dans la capture d'écran disponible à la fin du message, c'est que l'installation à fonctionner.
Vous pouvez ensuite refaire autant de lien que vous voulez ayant ce type d'infobulle très facile à personnaliser.
CAPTURE D'ECRAN : http://img53.xooimage.com/files/f/5/6/capture_ecran-2741f55.png
SOURCE : http://xooit.xooit.com/index.php
Site : http://soluceetinfos.onlc.fr/