begin process at 2012 05 29 10:34:12
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

modifier le list-style-Image CSS grace à l'évènement onmouseover


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

modifier le list-style-Image CSS grace à l'évènement onmouseover

jeudi 9 septembre 2010 à 13:51:01 | modifier le list-style-Image CSS grace à l'évènement onmouseover

celili40

J'avoue tout de suite, je n'ai pas encore commencé le cours de javascript et mis à part le livre que j'ai englouti sur la question, je n'ai pas beaucoup de références.

J'ai créé une liste à puces pour mon menu, les puces étant des images, l'ID de mes List Items "tetine". Pour faire court, voila l'extrait de mon code XHTML concernant le menu :

<div id="menu">
<p>
<ul>
<li id="tetine"><a href="edouard.html">Edouard</a></li>
<li id="tetine"><a href="arbre.html">L'arbre</a></li>
</ul>
</p>
</div>

Voici l'extrait de mon fichier CSS s'y rattachant :

li
{
list-style-image: url("images/tetine.png");
padding-top: 15px;
margin-left: 30px;
}

J'aimerai remplacerle l'URL du List Style Image de mes puces lors de l'évènement "onmouseover" et bien sur que les puces redeviennent "tetine.png" onmouseout.

J'ai créé un fichier javascript que j'ai trafiqué sans succès toute la matinée et qui donne en ce moment :

document.getElementById("tetine").onmouseover = menu;

function menu()
{
document.getElementById("tetine").style.listStyleImage="url('images/tetineanim2.gif')";
}


J'imagine que ma question est très basique, voire insultante, mais si quelqu'un pouvait me répondre, ca serait super!
Merci.
jeudi 9 septembre 2010 à 17:22:32 | Re : modifier le list-style-Image CSS grace à l'évènement onmouseover

Zobibol

Membre Club
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:

Code HTML :
<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:
Code HTML :
<ul>
  <li id="tetine" onmouseover="this.className='LIOver';" onmouseout="this.className=''"><a href="edouard.html">Edouard</a></li>
  <li id="tetine2" onmouseover="this.className='LIOver';" onmouseout="this.className=''"><a href="arbre.html">L'arbre</a></li>
</ul>


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]
jeudi 9 septembre 2010 à 22:03:52 | Re : modifier le list-style-Image CSS grace à l'évènement onmouseover

PetoleTeam

Membre Club
Bonjour,
le CSS suffit, si on excepte IE6
Code HTML :
<!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>
<body>
<div id="menu">
  <ul>
    <li class="tetine"><a href="edouard.html">Edouard</a></li>
    <li class="tetine"><a href="arbre.html">L'arbre</a></li>
  </ul>
</div>
</body>
</html>

Nota : on met class="tetine" et non deux éléments avec la même ID.

;O)
vendredi 10 septembre 2010 à 08:47:04 | Re : modifier le list-style-Image CSS grace à l'évènement onmouseover

celili40

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



Cette discussion est classée dans : style, image, list, onmouseover, tetine


Répondre à ce message

Sujets en rapport avec ce message

changer background image onmouseover [ par fcdconnect ] bonjour comment changer le background image d'une td onmouseoveraparrament le onMouseOver='this.style.background ne fonctionne pas merci d'avance deplacer une image à des coordonnées [ par gnosis35 ] salut voilà le pb : je clic sur une image et là j'ai pour tester deux texts box qui récupérent les coordonnées x,y de la souris... bon ça c tres bi affichage d'image avec onmouseover [ par Atorina ] Bonjour,J'aimerai afficher une image quand on passe sur un texte.Par exemple dans un talbeau, j'ai 2 colonnes.Dans la premiere je veux mettre du texte onmouseover dans une iframe [ par ourson93 ] bonjourj'ai un problème de onmouseover et onmouseout .je m'explique, j'ai une iframe dans une iframe et dans celle-ci j'ai<a href="A.html" onmouseover Image-blinkeur... [ par Grand Mamamouchi ] Bonjour !je voudrais ecrire un image-blinkeur.Voici le chantier :<script ty OnMouseOver : traiter le cas pour une centaine d'image [ par Tibabou ] Bonjour/soir,J'ai une centaine d'images (img1, img2, img3...) dans ma page et je voudrais afficher une image différente lorsque la souris passe au des onMouseOver ne passe pas avec IE ou avec <a></a> ?probleme [ par Guizmodams ] Bonjour tout le monde! Bon en fait j'ai une page .htm qui appelle un script .js, et qui utilise une feuille de style style.css. (le truc classique...) Comment récupérer le style d'un élément ? [ par eplanet ] Bonjour à tous, J'essaie d'écrire script qui insère une image dans le document HTML et qui récupère ensuite sa position absolue.Voici mon script (simp Modifier l'image background d'une cellule [ par darb66 ] Hello, je crée un menu dynamique et j'aimerai que l'image en background de ma cellule change lorsque le souris passe dessus. Donc j'ai créé une foncti probleme avec une fonction javascript + css [ par edelendil ] Voila, je dois créer un menu déroulant composé de deux tableaux le premier contient le titre de la rubrique et reste toujours visible le deuxieme con


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,279 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales