Faire un menu en JS pour qu'il fonctionne sous IE - HTML/CSS - Programmation
Marsh Posté le 21-07-2005 à 09:53:34
C'est simple, IE ne gère l'évènement hover que sur les liens
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.
Marsh Posté le 21-07-2005 à 12:18:38
oki donc pour déclencher la fonction cela se fait de cette facon :
<body> |
mais comment désigner l'élément ul ?
comment puis je trancrire en javasscript ?
#menu li:hover |
est ce ca en JS ?
document.getElementById('menu').element ul ??? .getElementById('estimation').position=relative; |
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
Marsh Posté le 21-07-2005 à 14:32:45
et comment changes tu la classes ?
|
c'est ca ? cela ne fonctionnen pas avec ='li.estimation' et =li.estimation
<div id="menu"> |
Marsh Posté le 21-07-2005 à 14:35:35
Code :
|
C'est quoi ça?
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
|
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
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
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
Marsh Posté le 21-07-2005 à 15:05:12
arf, ca ne marche toujours pas http://fuma001.free.fr/web%20-site/
- |
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.
Marsh Posté le 21-07-2005 à 15:11:25
j'avais égallement essayé entre simple quote aussi
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>
Marsh Posté le 21-07-2005 à 15:13:42
Ouais, il faut un id estimation, et il faut faire genre :
pouet.className = "estimation"; |
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. |
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"> </a></li> |
C'est correct ?
FlorentG a écrit : Ouais, il faut un id estimation, et il faut faire genre :
|
pouet represente quoi ?
comment serait ta fonction js ?
function ft() { |
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
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....
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"> </a></li> |
et dans mon fichier css :
/*#menu li:hover,*/ |
mais le bouton ne veut pas s'enfoncer avec du JS.
Marsh Posté le 22-07-2005 à 11:31:06
en plus ne faudrait il pas remettre l'ancien style sur le onMouseOut?
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.
Marsh Posté le 22-07-2005 à 12:45:49
FlorentG a écrit : Hein ? Le bouton veut pas s'enfoncer ? |
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
|
je ne pense pas avoir une erreur de syntaxe
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
|
ou
|
qu'est ce que vous feriez à ma place?
Marsh Posté le 22-07-2005 à 13:44:57
Pour échapper un double-quote, c'est :
<pouet plop="gaa"huhu""> |
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
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> </li>
<li> </li>
<li> </li>
<li> </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