Placer une image à côté d'un lien au survol
maureenp
-
Maureenp -
Maureenp -
Bonjour,
Bonjour, sur mon blog (http://www.maureenpoignonec.com/) je souhaitais mettre une petite icône qui apparaît au survol des liens de l'header ("Accueil", "à propos" [...]). Mais je ne trouve pas d'autres solutions que de mettre l'image en background... Et comme vous pouvez le constater c'est pas terrible. Est-ce qu'il y a moyen de ne pas mettre l'image en arrière plan mais juste la placer à côté de chaque lien (à droite) au survol de la souris ?
Et si possible seulement dans les liens du haut et pas dans chaque lien du blog ?
Merci !
Bonjour, sur mon blog (http://www.maureenpoignonec.com/) je souhaitais mettre une petite icône qui apparaît au survol des liens de l'header ("Accueil", "à propos" [...]). Mais je ne trouve pas d'autres solutions que de mettre l'image en background... Et comme vous pouvez le constater c'est pas terrible. Est-ce qu'il y a moyen de ne pas mettre l'image en arrière plan mais juste la placer à côté de chaque lien (à droite) au survol de la souris ?
Et si possible seulement dans les liens du haut et pas dans chaque lien du blog ?
Merci !
A voir également:
- Placer une image à côté d'un lien au survol
- Créer un lien pour partager des photos - Guide
- Lien url - Guide
- Placer des points sur une carte - Guide
- Verificateur de lien - Guide
- Image iso - Guide
1 réponse
Salut,
la première intuition utilisant l'image en background me paraît la meilleure.
Cependant elle pose un problème de positionnement que vous aurez de toute façon avec d'autres solutions comme utiliser javascript.
Je vous propose d'utiliser une marge interne(padding) de la taille de l'image afin d'adapter l'affichage:
Par exemple(le mieux est de donner une class à vos liens pour les utiliser plus facilement=:
Dans vos règles de styles(je ne sait pas trop où avec blogger qui est plus limité pour l'édition):
Voilà j'espère que vous n'aurez pas de problème à modifier le code. Notez que si vous vous passez de class en écrivant le css pour
a{} et a:hover{} le CSS sera appliqué à tous les liens de votre page, d'où l'intérêt d'indiquer une classe. Vous pouvez toutefois vous en passer en utilisant cette notation:
div.widget-content ul li a{...CSS ici}
et
div.widget-content ul li a:hover{...CSS ici}
Qui signifie pour les balises a dans un li d'un ul des div de class "widget-content" ....
ps: j'aime bien dans vos illustrations le manque de netteté des encrages des contours combiné avec une colorisation dans des teintes plutôt pâle. Tout en finesse pour un rendu 'gribouillage' plus vivant que certains cartoons que je trouve trop proprets.
la première intuition utilisant l'image en background me paraît la meilleure.
Cependant elle pose un problème de positionnement que vous aurez de toute façon avec d'autres solutions comme utiliser javascript.
Je vous propose d'utiliser une marge interne(padding) de la taille de l'image afin d'adapter l'affichage:
Par exemple(le mieux est de donner une class à vos liens pour les utiliser plus facilement=:
<a class="menu" href="...url du lien">texte du lien</a>
Dans vos règles de styles(je ne sait pas trop où avec blogger qui est plus limité pour l'édition):
a.menu{
padding-left:60px;/* à remplacer par les dimensions de l'image qui apparait au survol , éventuellement rajouter quelques pixels pour éviter les chevauchements avec les liens adjacents*/
...autre propriété CSS
background-image:none;
/* sert pour restaurer l'affichage de base lors de la sortie d'un survol
Éventuellement vous pouvez créer une image transparente de même dimension
*/
}
a.menu:hover{
// le padding-left(marge interne gauche) est inchangé)
background-image:url('petitcochon.png');
}
Voilà j'espère que vous n'aurez pas de problème à modifier le code. Notez que si vous vous passez de class en écrivant le css pour
a{} et a:hover{} le CSS sera appliqué à tous les liens de votre page, d'où l'intérêt d'indiquer une classe. Vous pouvez toutefois vous en passer en utilisant cette notation:
div.widget-content ul li a{...CSS ici}
et
div.widget-content ul li a:hover{...CSS ici}
Qui signifie pour les balises a dans un li d'un ul des div de class "widget-content" ....
ps: j'aime bien dans vos illustrations le manque de netteté des encrages des contours combiné avec une colorisation dans des teintes plutôt pâle. Tout en finesse pour un rendu 'gribouillage' plus vivant que certains cartoons que je trouve trop proprets.
Si vous ne voulez pas plus espacer vos boutons des menus par rapport à la mise en page qui ne s'y prête pas trop vous pouvez faire apparaître la petite tête de cochon au dessus.
Pour ça toujours avec l'affichage de l'image de fond vous pouvez changer la hauteur des boutons(le texte sera automatiquement aligné sur le bas):
a.menu{
height:3em;
/*em ou quadratin équivaut à la hauteur de ligne typographique, par défaut elle est de 1em(100%), 3em indique le triple(300%), à modifier selon tests d'affichages bien sûr. Pour des valeurs plus précise 1.5em équivaut à 150% de la hauteur de base de la police du texte etc...*/
...autre propriétés CSS
}
Merci beaucoup pour votre réponse.
J'ai fait comme vous m'aviez dit (pour le moment j'ai juste crée un lien "cliquez-ici" en bas de la colonne de droite, comme test).
Et en effet au survol des liens seulement ce lien est concerné.
Par contre j'ai beau avoir ajouté dans la feuille de style ce code là :
a.menu{
padding-left:31px;
background-image:none;
}
a.menu:hover{
background-image:url('http://nimga.fr/f/Ywyvt.png');
background-repeat: no-repeat}
a.menu{
height:3em;
}
ça fait la même chose qu'avant, excepté que maintenant (et c'est bien) seul le lien de mon choix est concerné. Mais l'icône reste placée sous le texte.
j'ai ajouté comme vous le proposiez le "height:3em" parce que en effet ça pourrait même donné mieux si le cochon apparaît au dessus des liens au survol !
Merci encore !
a.menu{
padding-left:31px;
padding-top:20px;
background-image:none;
}
a.menu:hover{
background-image:url('http://nimga.fr/f/Ywyvt.png');
background-repeat: no-repeat}
height:3em;
}
C'est presque ça, il faudrait juste que le petit cochon soit au milieu plutôt qu'à gauche !
Mais j'ai pas encore trouvé comment faire...
background-position réglera la question:
Par ex:
// la 1ère valeur est la position horizontale la 2ème verticale.
http://www.w3schools.com/cssref/pr_background-position.asp
Pour plus de précisions vous pouvez aussi utiliser des valeurs en % ou décalage en px.
Comme les menus n'ont pas tous la même longueur avec cette solution il faudra peut être faire du cas par cas, à tester comme toujours ;)
Sans oublier la notation raccourcie qui permet d'écrire toutes les propriétés regroupées en une seule et se nomme background:
(voir en bas de page):
www.w3schools.com/css/css_background.asp