Changer une image au survol avec CSS
hiddan
Messages postés
127
Statut
Membre
-
hiddan Messages postés 127 Statut Membre -
hiddan Messages postés 127 Statut Membre -
Bonjour à tous,
J'essaye de créer des boutons avec HTML et CSS (sans passer par du javascript). J'ai donc créer une lien grace à une image, j'aurais aimé que l'image se modifie au survol, mais je n'y arrive pas. Auriez vous une idée de la facon de procéder ?
Merci d'avance à tous et bonne soirée !
Code HTML de ma page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="code.css" />
<title>Essai</title>
</head>
<body>
<p>
<a class="lien" href="https://openclassrooms.com/fr/"><img src="accueil.jpg" alt="Photo" /></a><br />
</p>
</body>
</html>
Code CSS :
a.lien /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: white;
font-style: italic;
}
a.lien:hoover
{
}
J'essaye de créer des boutons avec HTML et CSS (sans passer par du javascript). J'ai donc créer une lien grace à une image, j'aurais aimé que l'image se modifie au survol, mais je n'y arrive pas. Auriez vous une idée de la facon de procéder ?
Merci d'avance à tous et bonne soirée !
Code HTML de ma page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="code.css" />
<title>Essai</title>
</head>
<body>
<p>
<a class="lien" href="https://openclassrooms.com/fr/"><img src="accueil.jpg" alt="Photo" /></a><br />
</p>
</body>
</html>
Code CSS :
a.lien /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: white;
font-style: italic;
}
a.lien:hoover
{
}
A voir également:
- Changer une image au survol avec CSS
- Changer dns - Guide
- Légender une image - Guide
- Image iso - Guide
- Changer carte graphique - Guide
- Changer extension fichier - Guide
2 réponses
Bonjour,
Pour commencer, j'enlèverais l'image contenue dans la balise <a>.
Ensuite, je ferais ma feuille CSS de cette façon :
L'idéal est d'avoir une image regroupant tes deux photos l'une au dessus de l'autre, ça évite un temps de chargement lors du survol.
Voila une solution avec uniquement du CSS. Maintenant si tu veux garder ta balise, je ne vois pas comment faire autrement qu'avec du javascript.
Pour commencer, j'enlèverais l'image contenue dans la balise <a>.
Ensuite, je ferais ma feuille CSS de cette façon :
a.lien{
display: block;
width: ...px; //mettre la largeur de l'image
height: ...px; //mettre la hauteur de l'image
background: url(img/accueil.jpg) center top no-repeat;
}
a.lien:hover{
background-position: center bottom;
}
L'idéal est d'avoir une image regroupant tes deux photos l'une au dessus de l'autre, ça évite un temps de chargement lors du survol.
Voila une solution avec uniquement du CSS. Maintenant si tu veux garder ta balise, je ne vois pas comment faire autrement qu'avec du javascript.
