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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Faire un menu en JS pour qu'il fonctionne sous IE

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Faire un menu en JS pour qu'il fonctionne sous IE

n°1155573
weed
Posté le 21-07-2005 à 09:50:17  profilanswer
 

http://fuma001.free.fr/web%20-site/
 
comment vous pouvez le voire lorsque l'on passe sur les boutons avec la souris, le bouton s'enfonce alors que sous IE rien ne se passe. Le hover n'est pas prise en compte....
 
Comment ai je realisé mon bouton ?
 
j'ai utilisé de div, un pour l'ombre et les boutons eux meme. Bien entendu pour faire la série d'ombre, j'ai utilisé les listes.
lorsque je passe que sur le bouton, c'est a dire li, je change de coordonées le bouton.  
 
J'ai fais le hover, non pas sur la balise <a href="#"> pour lorsque je passe sur le bouton (et non pas uniquement sur le lien) le bouton s'enfonce.
 
css :
 

/*positionnement de l'ombre*/
div#ombre {
 position: absolute;
 top: 38px;
 left: -12px;  
}
#ombre li  
{
 background-color: black;
}
 
 
#logo li:hover
{
 background-color: #E72092;
 position: relative;
 top: 8px;
 left: 8px;
}
li
{
 /*padding: 4px;*/
 padding-bottom: 8px;
 
 list-style-type: none;
 font-weight: bold;
 background: #E72092;
 font-size: 15px;
 border: 0px black outset;
 margin-top: 20px;
 width: 150px;  
}  
 
a
{
 text-decoration :none;
 bottom: 35px;
 right: 12px;
  padding: 4px 5px 3px 5px;
  font-family: cursive;
  color: white;
}


 
HTML :
 

<div id="ombre">
  <ul>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
   <li>&nbsp;</li>
  </ul>
 </div>
 
 <div id="logo">
   <ul>
        <li><a href="test.html">Estimez votre bien</a></li>
        <li><a href="#">Vous achetez</a></li>
        <li><a href="#">Vous vendez</a></li>
        <li><a href="#">Qui sommes nous ?</a></li>
  </ul>
 </div>


Message édité par weed le 21-07-2005 à 12:43:57
mood
Publicité
Posté le 21-07-2005 à 09:50:17  profilanswer
 

n°1155578
plainsofpa​in
Pingouino's lover
Posté le 21-07-2005 à 09:53:34  profilanswer
 

C'est simple, IE ne gère l'évènement hover que sur les liens :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1155591
weed
Posté le 21-07-2005 à 10:10:17  profilanswer
 

bahh oaui mais alors comment puis je faire ?

n°1155602
weed
Posté le 21-07-2005 à 10:21:13  profilanswer
 

y aurait pas un code tout pourri qui existerait pour IE ?
comme ca, je reagrde le user-agent du navigateur de l'enternaute et je fais executer ou pas le code IE.
 
 
La dernière solution qui s'offre à moi, c'est de faire un bouton en image cliquable si j'ai bien compris.

n°1155621
FlorentG
Posté le 21-07-2005 à 10:41:23  profilanswer
 

Pour ça, faut un p'tit javascript à rajouter pour IE

n°1155857
weed
Posté le 21-07-2005 à 12:18:38  profilanswer
 

oki donc pour déclencher la fonction cela se fait de cette facon :  
 
 

<body>
        ....
 
 <div id="menu">
   <ul>
        <li onMouseOver="ft()" id="estimation"><a href="test.html">Estimez votre bien</a></li>
        <li><a href="#">Vous achetez</a></li>
        <li><a href="#">Vous vendez</a></li>
        <li><a href="#">Qui sommes nous ?</a></li>
  </ul>
 </div>
        .....
</body>


 
 
mais comment désigner l'élément ul ?
 
comment puis je trancrire en javasscript ?  

#menu li:hover
{
 background-color: #E72092;
 position: relative;
 top: 8px;
 left: 8px;
}


 
est ce ca en JS ?

document.getElementById('menu').element ul ??? .getElementById('estimation').position=relative;
document.getElementById('menu').element ul ??? .getElementById('estimation').top=8px;
document.getElementById('menu').element ul ??? .getElementById('estimation').left=8px;
document.getElementById('menu').element ul ??? .getElementById('estimation').background-color="#E72092";


Message édité par weed le 21-07-2005 à 12:19:46
n°1155859
FlorentG
Posté le 21-07-2005 à 12:19:34  profilanswer
 

Avec une classe spéciale, genre tu met :

#menu li:hover, li.pouet {


Et dans le mouseover, du changera la classe du truc par pouet

n°1156046
weed
Posté le 21-07-2005 à 14:32:45  profilanswer
 

et comment changes tu la classes ?


document.getElementById('menu').document.getElementById('tid').document.getElementById('estimation').className=li.estimation;


 
c'est ca ? cela ne fonctionnen pas avec ='li.estimation' et =li.estimation
 
 

<div id="menu">
   <ul id="tid">
         <li onMouseOver="ft()" class="estimation"><a href="test.html">&nbsp;</a></li>
        <li><a href="#">Vous achetez</a></li>
        <li><a href="#">Vous vendez</a></li>
        <li><a href="#">Qui sommes nous ?</a></li>
  </ul>
 </div>


Message édité par weed le 21-07-2005 à 14:33:31
n°1156051
fred_p
Posté le 21-07-2005 à 14:35:35  profilanswer
 

Code :
  1. document.getElementById('menu').document.getElementById('tid').document.getElementById('estimation').className=li.estimation;


C'est quoi ça?

n°1156053
FlorentG
Posté le 21-07-2005 à 14:37:38  profilanswer
 

:eek:

mood
Publicité
Posté le 21-07-2005 à 14:37:38  profilanswer
 

n°1156061
weed
Posté le 21-07-2005 à 14:41:11  profilanswer
 

ouppps, c'est vrai que je me suis un peu trompé, c'est un petit oublié. J'essaie comme ceci en supprimant les documents


document.getElementById('menu').getElementById('tid').getElementById('estimation').className=li.estimation;

Message cité 1 fois
Message édité par weed le 21-07-2005 à 14:41:25
n°1156066
weed
Posté le 21-07-2005 à 14:43:43  profilanswer
 

arf, ca fonctionne pas non plus. J'ai du faire une erreur quelques part parce que IE m'indique une erreur

n°1156077
weed
Posté le 21-07-2005 à 14:49:17  profilanswer
 

si cela peut vous aider à mieux cerner mon souci : http://fuma001.free.fr/web%20-site/
j'ai mis à jour la version en ligne

n°1156078
FlorentG
Posté le 21-07-2005 à 14:50:08  profilanswer
 

Ca sert à quoi de chaîner les getElementById ? Parce que ça sert grave à rien, et c'est incorrect. Vu qu'un id est unique dans tout le doc

n°1156097
weed
Posté le 21-07-2005 à 15:05:12  profilanswer
 

arf, ca ne marche toujours pas http://fuma001.free.fr/web%20-site/
 

-
function ft() {
 document.getElementById('estimation').className=li.estimation;  
 
}
//-->

n°1156105
fred_p
Posté le 21-07-2005 à 15:09:06  profilanswer
 

j'me rappelle plus comment marche le className, mais à mon avis, li.estimation ça doit rien vouloir dire à l'interpreteur. Essaye peut-être de le mettre entre quotes.

n°1156107
weed
Posté le 21-07-2005 à 15:11:25  profilanswer
 

j'avais égallement essayé entre simple quote aussi


Message édité par weed le 21-07-2005 à 15:11:39
n°1156109
afbilou
pouet your life
Posté le 21-07-2005 à 15:12:17  profilanswer
 

Tu n'as pas d'element d'identifiant 'estimation' dans ta structure html.
li.estimation n'est pas un nom de classe valide ...
 
Tu devrais ameliorer ton menu comme ceci :
 
<div id="pre_cadre_pre_menu">
  <div id="pre_cadre_menu>
    <div id="cadre_menu">
      <div id="un_dernier_pour_la_fete">
        <ul>
           <li>Menu</li>
           <li>Menu</li>
           <li>Menu</li>
           <li>Menu</li>
        </ul>
      </dvi>
    </div>
  </div>
</div>

n°1156111
afbilou
pouet your life
Posté le 21-07-2005 à 15:13:34  profilanswer
 

Comme ca ton menu sera habillé pour l'hivers :D
Pardon :/

n°1156112
FlorentG
Posté le 21-07-2005 à 15:13:42  profilanswer
 

Ouais, il faut un id estimation, et il faut faire genre :

pouet.className = "estimation";

n°1156158
weed
Posté le 21-07-2005 à 15:40:51  profilanswer
 

afbilou a écrit :

Tu n'as pas d'element d'identifiant 'estimation' dans ta structure html.
li.estimation n'est pas un nom de classe valide ...
 
Tu devrais ameliorer ton menu comme ceci :
 
<div id="pre_cadre_pre_menu">
  <div id="pre_cadre_menu>
    <div id="cadre_menu">
      <div id="un_dernier_pour_la_fete">
        <ul>
           <li>Menu</li>
           <li>Menu</li>
           <li>Menu</li>
           <li>Menu</li>
        </ul>
      </dvi>
    </div>
  </div>
</div>


 
je ne comprends pas pourquoi tu me dis. Les éléments sont bien placé et cela marche nickel sauf avec IE qui est une merde (y a pas de mot assez fort) pas possible qui me faire mon temps pour des conneries. Comme m'a conseillé FlorentG, je rajoute du JS à mon existant pour que IE soit supporté.
 
 
Je pense que mon code est bien organisé. Les balises concernés par le JS sont identifié <div id="menu">, <ul id="tid">, <li onMouseOver="ft()" class="estimation">, mais comme a faire remarqué FlorenG ("  Ca sert à quoi de chaîner les getElementById ? Parce que ça sert grave à rien, et c'est incorrect. Vu qu'un id est unique dans tout le doc" ) il n'y a meme pas besoin d'utiliser l'identification du div, y a juste de besion de l'identification de la balise il.
 
pour identifier le <il>, vaut il mieux utiliser une classe ou une ID ?
 
j'ai utilisé une classe comme ceci :

<li onMouseOver="ft()" class="estimation"><a href="test.html">&nbsp;</a></li>


C'est correct ?
 
 

FlorentG a écrit :

Ouais, il faut un id estimation, et il faut faire genre :

pouet.className = "estimation";



pouet represente quoi ?
comment serait ta fonction js ?
 
 

function ft() {
 pouet.className="estimation";  
 
}


Message édité par weed le 21-07-2005 à 15:47:31
n°1156184
FlorentG
Posté le 21-07-2005 à 15:54:22  profilanswer
 

Prend-toi deux jours de vacances, je crois que t'as le cerveau en fumée :D

n°1156198
weed
Posté le 21-07-2005 à 15:59:49  profilanswer
 

J'avais l'attention. J'attendais une petite reponse de votre part avant.
 
je vais sortir l'air un peu pendant 3-4h parce que en effet j'en ai ma claque de IE  qui me ch....


Message édité par weed le 21-07-2005 à 16:01:17
n°1156735
weed
Posté le 22-07-2005 à 03:07:44  profilanswer
 

bon voilou. en fait ca a l'air tout con et j'ai compris le principe mais cela ne veut toujours pas fonctionner.
 
j'ai mis  
 

<li onMouseOver="this.className=\"estimation\";"><a href="test.html">&nbsp;</a></li>


 
 
et dans mon fichier css :
 

/*#menu li:hover,*/
.estimation
{
 background-color: #E72092;
 position: relative;
 top: 8px;
 left: 8px;
}


 
mais le bouton ne veut pas s'enfoncer avec du JS.

n°1156826
FlorentG
Posté le 22-07-2005 à 10:02:36  profilanswer
 

Hein ? Le bouton veut pas s'enfoncer ? :heink:

n°1156975
fred_p
Posté le 22-07-2005 à 11:31:06  profilanswer
 

en plus ne faudrait il pas remettre l'ancien style sur le onMouseOut?

n°1157014
weed
Posté le 22-07-2005 à 12:03:48  profilanswer
 

oui je suis tout a fait d'accord avec toi fred, il faudra que je mette le onMouseOut, mais avant tout si je mets seulement le onMouseOver, le bouton devrait quand meme s'enfoncer et rester enfoncer si je sors du div.  

n°1157087
weed
Posté le 22-07-2005 à 12:45:49  profilanswer
 

FlorentG a écrit :

Hein ? Le bouton veut pas s'enfoncer ? :heink:


 
 
je veux faire comme ces boutons qui fonctionnent sous firefox mais j'aimerais que ce soit le cas aussi avec IE.
 
 
ce qui est bizzare, lorsque je lance la console javascript de firefox, il me dit  
 


illegal caractère :
 
this.className=\'estimation\';\


 
je ne pense pas avoir une erreur de syntaxe
 
 

n°1157089
FlorentG
Posté le 22-07-2005 à 12:48:49  profilanswer
 

Oula :heink:

<li onMouseOver="this.className='estimation';">

n°1157102
weed
Posté le 22-07-2005 à 13:04:48  profilanswer
 

olalala, j'etais persudé qu'il fallait les échapé. Heuresment qu'il y a avait la console de ff qui m'a mis sur la piste mais j'etais loin de m'imaginer qu'il fallait faire comme ca....
 
ca fonctionne maintenant parfaitement. Maintement la question. Vaut il mieux que je retire la class css #menu li:hover qui n'est utilisé que par firefox et firefox utiliser le javascript (comme IE) ou vaut il mieux la laisser  
 
 


#menu li:hover, .estimation
{
 background-color: #E72092;
 position: relative;
 top: 8px;
 left: 8px;
}


 
ou  
 


.estimation
{
 background-color: #E72092;
 position: relative;
 top: 8px;
 left: 8px;
}


 
 
qu'est ce que vous feriez à ma place?  

n°1157137
FlorentG
Posté le 22-07-2005 à 13:44:57  profilanswer
 

Pour échapper un double-quote, c'est :

<pouet plop="gaa&quot;huhu&quot;">


Sinon faut faire les deux : le li:hover pour FF par exemple, et la classe pour IE. Attention, faut faire une détection pourrite de navigateur pour IE. La raison étant que pour FF sous Windows (peut-être ailleurs), les mouseover provoque un scintillement du truc chelou :heink:

mood
Publicité
Posté le   profilanswer
 


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

  Faire un menu en JS pour qu'il fonctionne sous IE

 

Sujets relatifs
Menu déroulantComment faire un joli menu horizontal avec des div
formulaire fonctionne sous IE mais pas sous Mozilla??include et menu
[resolu (merci)] probleme sur un clam shell menuProbleme menu deroulant html/css/javascript
menu déroulant à partir d'un fichier texte?date dans un menu deroulant combobox
PHP/Postgresql fonctionne qu'en ligne de commande et pas via httpdreamweaver cadres + menu deroulant
Plus de sujets relatifs à : Faire un menu en JS pour qu'il fonctionne sous IE


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