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

Faire un menu en JS pour qu'il fonctionne sous IE - HTML/CSS - Programmation

Marsh Posté le 21-07-2005 à 09:50:17    

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
Reply

Marsh Posté le 21-07-2005 à 09:50:17   

Reply

Marsh Posté le 21-07-2005 à 09:53:34    

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
Reply

Marsh Posté le 21-07-2005 à 10:10:17    

bahh oaui mais alors comment puis je faire ?

Reply

Marsh Posté le 21-07-2005 à 10:21:13    

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.

Reply

Marsh Posté le 21-07-2005 à 10:41:23    

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

Reply

Marsh Posté le 21-07-2005 à 12:18:38    

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
Reply

Marsh Posté le 21-07-2005 à 12:19:34    

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

Reply

Marsh Posté le 21-07-2005 à 14:32:45    

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
Reply

Marsh Posté le 21-07-2005 à 14:35:35    

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


C'est quoi ça?

Reply

Marsh Posté le 21-07-2005 à 14:37:38    

:eek:

Reply

Marsh Posté le 21-07-2005 à 14:37:38   

Reply

Marsh Posté le 21-07-2005 à 14:41:11    

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
Reply

Marsh Posté le 21-07-2005 à 14:43:43    

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

Reply

Marsh Posté le 21-07-2005 à 14:49:17    

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

Reply

Marsh Posté le 21-07-2005 à 14:50:08    

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

Reply

Marsh Posté le 21-07-2005 à 15:05:12    

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

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

Reply

Marsh Posté le 21-07-2005 à 15:09:06    

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.

Reply

Marsh Posté le 21-07-2005 à 15:11:25    

j'avais égallement essayé entre simple quote aussi


Message édité par weed le 21-07-2005 à 15:11:39
Reply

Marsh Posté le 21-07-2005 à 15:12:17    

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>

Reply

Marsh Posté le 21-07-2005 à 15:13:34    

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

Reply

Marsh Posté le 21-07-2005 à 15:13:42    

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

pouet.className = "estimation";

Reply

Marsh Posté le 21-07-2005 à 15:40:51    

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
Reply

Marsh Posté le 21-07-2005 à 15:54:22    

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

Reply

Marsh Posté le 21-07-2005 à 15:59:49    

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
Reply

Marsh Posté le 22-07-2005 à 03:07:44    

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.

Reply

Marsh Posté le 22-07-2005 à 10:02:36    

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

Reply

Marsh Posté le 22-07-2005 à 11:31:06    

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

Reply

Marsh Posté le 22-07-2005 à 12:03:48    

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.  

Reply

Marsh Posté le 22-07-2005 à 12:45:49    

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
 
 

Reply

Marsh Posté le 22-07-2005 à 12:48:49    

Oula :heink:

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

Reply

Marsh Posté le 22-07-2005 à 13:04:48    

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?  

Reply

Marsh Posté le 22-07-2005 à 13:44:57    

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:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed