Modifier le list-style-Image CSS grace à l'évènement onmouseover
celili40
Messages postés
2
Date d'inscription
jeudi 9 septembre 2010
Statut
Membre
Dernière intervention
10 septembre 2010
-
9 sept. 2010 à 13:51
celili40 Messages postés 2 Date d'inscription jeudi 9 septembre 2010 Statut Membre Dernière intervention 10 septembre 2010 - 10 sept. 2010 à 08:47
celili40 Messages postés 2 Date d'inscription jeudi 9 septembre 2010 Statut Membre Dernière intervention 10 septembre 2010 - 10 sept. 2010 à 08:47
3 réponses
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
9 sept. 2010 à 17:22
9 sept. 2010 à 17:22
Salut aussi !
alors, déjà deux vois le même id dans une page, c'est pas bien !!!!
ce qui est bien c'est des ids différents.
une solution: le CSS et un tout petit peu de javascript:
et ensuite, rien de bien transcendant:
sur le mouseover on change la classe de l'élément li et sur le mouseout, on vire la classe.
c'est pas plus simple comme ça ??
[o-_-o]
alors, déjà deux vois le même id dans une page, c'est pas bien !!!!
ce qui est bien c'est des ids différents.
une solution: le CSS et un tout petit peu de javascript:
<style>
/**
* Classe par défaut des li
*/
li
{
list-style-image: url("images/tetine.png");
padding-top: 15px;
margin-left: 30px;
}
/**
* Classe utilisée lors du survol
*/
.LIOver{
list-style-image: url("images/tetineanim2.gif");
}
</style>
et ensuite, rien de bien transcendant:
<li id="tetine" onmouseover="this.className='LIOver';" onmouseout="this.className=''">[edouard.html Edouard]</li> <li id="tetine2" onmouseover="this.className='LIOver';" onmouseout="this.className=''">[arbre.html L'arbre]</li>
sur le mouseover on change la classe de l'élément li et sur le mouseout, on vire la classe.
c'est pas plus simple comme ça ??
[o-_-o]
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
9 sept. 2010 à 22:03
9 sept. 2010 à 22:03
Bonjour,
le CSS suffit, si on excepte IE6
Nota : on met class ="tetine" et non deux éléments avec la même ID.
;O)
le CSS suffit, si on excepte IE6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<title>CSS sur LI</title>
<meta http-equiv= "Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tetine li {
list-style-image : url("images/tetine.png");
padding-top : 15px;
margin-left : 30px;
}
.tetine li:hover {
list-style-image : url("images/tetineanim2.gif");
}
</style>
</head>
<li class="tetine">[edouard.html Edouard]</li>
<li class="tetine">[arbre.html L'arbre]</li>
</html>
Nota : on met class ="tetine" et non deux éléments avec la même ID.
;O)
celili40
Messages postés
2
Date d'inscription
jeudi 9 septembre 2010
Statut
Membre
Dernière intervention
10 septembre 2010
10 sept. 2010 à 08:47
10 sept. 2010 à 08:47
Hello!
Effectivement je m'en suis rendue compte après pour les ID : à force de bidouiller mon code j'ai fait n'importe quoi !!! Pour le reste vous avez 1000 fois raison aussi, c'est bien plus simple de jouer sur le CSS que sur le Javascript! Merci beaucoup à tous les deux, je vous confirme que les tétines bougent enfin
Effectivement je m'en suis rendue compte après pour les ID : à force de bidouiller mon code j'ai fait n'importe quoi !!! Pour le reste vous avez 1000 fois raison aussi, c'est bien plus simple de jouer sur le CSS que sur le Javascript! Merci beaucoup à tous les deux, je vous confirme que les tétines bougent enfin
