Créer une image cliquable sans texte
Une petite brève pour aujourd'hui, car je viens de tomber sur un petit os et j'ai compris un peu plus tard où était mon erreur. Comme vous le savez, je suis en train de créer un nouveau thème pour mon blog sous wordpress, et mon problème a été d'afficher une image cliquable, toujours en CSS, mais sans texte à afficher. Voici le code créé :
a#logo { background: url(images/logo.png) no-repeat; height: 64px; width: 200px; display: block; } a#logo:hover { background-image: url(images/logo-over.png); }
Enuite, on demande son affichage par le code html suivant :
<a id="logo" href="#" title="#"></a>
Mon erreur a été de ne pas déclarer le display: block. Si vous ne le mettez pas, votre image ne s'affichera pas, ou s'affichera sous le texte servant de lien uniquement. Même les valeurs de largeur et de hauteur renseignées ne changeront rien.
C'était pourtant simple, mais il arrive d'oublier par moments...
Une belle astuce !
A noter que si vous voulez faire suivre plusieurs images horizontalement de cette manière, ce n'est pas la propriété display: inline qu'il faut utiliser mais bel et bien celle-çi : display: inline-block




