Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1643 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS, menu : onmouseover sur <DIV> 2 styles différents ??

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS, menu : onmouseover sur <DIV> 2 styles différents ??

n°234075
Jiff
Worldmind répond moi !
Posté le 24-10-2002 à 19:35:36  profilanswer
 

Salut,
 
voilà, j'essaye de faire un site propre et d'utiliser des DIV à la place des TABLE.
 
J'essaye de faire un menu réactif.
 
Les exemples que j'ai trouvé sont tous avec des rollover en images ou avec des TABLE
 
en fait je cherche à appliquer sur un layout avec div
   

  • un style pour l'affichage normal (bleu clair).

   

  • un style quand la souris est sur le calque (bleu foncé).


j'ai fait ca, mais la cellule ne change pas, comment appliquer le style-2 lors d'un onmouseover ?
 

Code :
  1. <div id="Menu 1-2" style="position:absolute; left:0px; top:81px; width:162px; height:13px; z-index:2" class="menu-1-off" onMouseOver="class="menu-1-on";"></div>


 
merci.

mood
Publicité
Posté le 24-10-2002 à 19:35:36  profilanswer
 

n°234081
Schimz
Bouge pas, meurs, ressuscite !
Posté le 24-10-2002 à 19:53:18  profilanswer
 

pas de mouseover pour les <div>
 
(active l'alerte/le debugeur de script)


---------------
çà s'est HFR | Music for the Galaxy
n°234082
Jiff
Worldmind répond moi !
Posté le 24-10-2002 à 19:55:52  profilanswer
 

zut, je le fait avec dreamweaver et je repasse derriere sur le code et Dream me donnait onmouseover dans la liste des attributs :(

n°234109
gm_superst​ar
Appelez-moi Super
Posté le 24-10-2002 à 20:39:11  profilanswer
 

Jiff a écrit a écrit :

Code :
  1. <div id="Menu 1-2" style="position:absolute; left:0px; top:81px; width:162px; height:13px; z-index:2" class="menu-1-off" onMouseOver="class="menu-1-on";"></div>






Argh ! quelle horreur !
 
Bon reprenons, il y a 2 manières de faire des rollovers sur un <div> :
 
* Soit avec JavaScript
 
Dans ce cas tu dois donner un nom correct à ton <div> avec l'attribut "id". Déjà, tu n'as pas droit aux espaces dans "id", donc ton id="Menu 1-2" est faux. Je rappelle également qu'un "id" doit être unique pour tout le document.
 
Ensuite ton onmouseover est faux. Tu ne peux pas écrire onMouseOver="class="menu-1-on"; car le navigateur va s'arrêter dès le 2ème guillemet et ne va garder que "class=" ce qui est faux. De toute façon ce n'est pas comme ça qu'on change la couleur du fond.
 
Tu dois écire ton onmouseover comme ça :
 

onmouseover="this.style.backgroundColor='#990000';"


 
"this" sert à désigner l'objet courant (le <div> ).
 
Ensuite il suffit de faire pareil avec un onmouseout pour remettre la bonne couleur lorsque la souris quitte le <div>
 
 
* Soit avec les CSS
 
J'imagine que ton menu contient des liens. On peut donc imaginer qu'ils s'organisent comme ça :
 

<div id="menu">
  <a href="...">Lien 1</a>
  <a href="...">Lien 2</a>
  <a href="...">Lien 3</a>
</div>


 
Déjà, on peut se dispenser de mettre chaque lien dans un <div> grâce à la propriété CSS display: block;
 

div#menu a {
  display: block;
}


 
Ceci dit que tout élément <a> se trouvant dans un <div> qui a l'id "menu", l'élément <a> se comporte comme une boîte (c'est à dire comme un <div>, les <a> s'empilent verticalement les uns sur les autres)
 
Ensuite il suffit de définir une couleur de fond pour l'élément <a> ainsi qu'une couleur pour le cas où la souris se trouve en dessus de celui-ci. Ce qui au final nous donne :
 

div#menu a {
  display: block;
  background-color: #FF0000;
}
 
div#menu a:hover {
  background-color: #990000;
}


 
 
A toi donc de choisir la méthode qui te convient (la seconde est à préférer car tout le monde n'active pas le JavaScript)


Message édité par gm_superstar le 24-10-2002 à 20:39:45

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°234175
Jiff
Worldmind répond moi !
Posté le 24-10-2002 à 23:31:24  profilanswer
 

merci, j'utiliserai la 2ème méthode si je ne trouve pas un moyen de faire ce que je voulais.
 
Je voulais faire un menu de ce type (<2Ko) : http://jiff23.free.fr/menu.swf
 
c'est un menu fait en moins d'une minute avec Flash, mais je vais essayer de ne pas faire les éléments importants en Flash afin qu'ils puissent être vus par tout le monde.
 
et je voulais utiliser les css pour pouvoir changer les couleurs des menu juste en changant une valeur dans le css.
 
donc, on ne peut pas utiliser les css pour ce type de menu ??
 
si vous avez des liens (oui, je sais...j'ai déja commencer à chercher :D ).


Message édité par Jiff le 24-10-2002 à 23:46:28
n°234179
gm_superst​ar
Appelez-moi Super
Posté le 24-10-2002 à 23:58:34  profilanswer
 

Jiff a écrit a écrit :

donc, on ne peut pas utiliser les css pour ce type de menu ??



Ben si c'est ce que j'ai commencé à faire à mon post précédent.

Jiff a écrit a écrit :

si vous avez des liens (oui, je sais...j'ai déja commencer à chercher :D ).



Voir ma signature, il y a plein de liens vers des sites sur les CSS


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°235640
Jiff
Worldmind répond moi !
Posté le 27-10-2002 à 20:13:08  profilanswer
 

merci, j'ai réussi ce que je voulais ;)  :jap:

n°235648
faden
Posté le 27-10-2002 à 20:33:46  profilanswer
 

jette un petit coup d'oeil la dessus !
 
http://www.magnin-sante.ch/mon_php.php
 
SVP, ca serait bien si vous signaliez les erreurs dans le HTML ou dans le script ! ... D'après ce que je lis en haut je ne m'y suis pas pris de la meilleurs manière ! ... Ce script fonctionne à partir de IE4 et netscape 4 !!! c'était son but ! ... m'enfin qui utilise encore ca de nos jours ?


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS, menu : onmouseover sur <DIV> 2 styles différents ??

 

Sujets relatifs
[Css] Quelqu'un peut me rappeler comment appliquer 2 class ?[HTML, JS] Bug IE6 et background-color en CSS ?
[CSS] CSS unique et liaison depuis toutes les pages d'un sitechangement d'image onmouseover par CSS ???
CSS et Netscape 4.7 ?!Norton Ghost 2003 : création d'un CD d'amorce avec un menu sous DOS !
menu click droit[CSS] Votre méthode pour avoir du code HTML propre ?
[CSS] tuto pour full-CSS 
Plus de sujets relatifs à : CSS, menu : onmouseover sur <DIV> 2 styles différents ??


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR