But

    Le but de cette astuce est d'afficher une image sur un mot sans faire un clic de souris. Il suffit de poser le curseur sur le mot ou la phrase.

Voici deux exemples

  Posez votre curseur ici

                                                   Ou posez le là

Autre exemple

  Cette astuce est utilisée sur ce blog.

Le code à mettre dans le CSS  (A ne pas mettre dans le  html de votre article) 

==> Il suffit simplement de coller ce qui est en gras dans le css de votre blog.

La fonction se nomme : voir-une-image  ---> mais vous pouvez la renommer

a.voir-une-image {
position:relative;
font-size: 11px;   -----Ceci modifie la taille du texte, cela peut être supprimé
font-weight: bold;  ---- Ceci met le texte en gras, cela peut être supprimé
}

a.voir-une-image span {display: none;}

a:hover.voir-une-image span {
display: inline;
position: absolute;
top: -20px; ----- Cette valeur correspond au décalage (sur le haut si le chiffre est négatif) de l'image par rapport au début du mot
left:150px; ----- Cette valeur est le décalage (sur la droite si le chiffre est positif) de l'image par rapport au début du mot
z-index: 20;
width:100%; ----- Ceci est la taille de l'image, avec 100% elle s'affichera en entier.
padding:2px 4px;
}

Le code html (à mettre dans le  source de votre article)

Maintenant que le css est définitivement réalisé, il faut coller ceci dans le html de l'article

<a class="voir-une-image" href="votre lien"> Posez votre curseur ici <span><img src="url de l'image" alt="Hooo, c'est beau !" /></span></a>

Limitation
   Aucune. Ce code ne contient pas de Javascript.

Retour menu Widget