Evenement onmouseover sur le survol d'un "option" d'un "select"

Version imprimable

11/05/2006, 10h03
Bartuk

Evenement onmouseover sur le survol d'un "option" d'un "select"

Bonjour,

J'aimerais savoir si il est possible d'avoir un évenement "onmouseover" quand on passe la souris sur les options d'un select. En fait, l'utilisateur clique sur le menu (il se déroule), et avec la souris il passe au dessus des différentes "option" du "select" sans cliquer. Y a t il une possibilité d'avoir en temps réel la valeur de l'option survolée?
Y a t il une méthode faite pour cela?
Sinon, y a t il une bidouille permettant de le faire? :mrgreen:
Merci pour vos réponses
11/05/2006, 10h36
SpaceFrog

Il me semble firefox l'accèpte mais pas IE .. mais je n'en suis pas sur ...

la bidouille consiste à faire ton proprs select a partir d'ul et de li ...
et pour garder les focntionalités formulaires du select le lier à un inout hidden ...
11/05/2006, 11h40
Bartuk

Tout d'abord merci pour la réponse.
Par contre je suis un peu nul en JS-HTML :oops: et je dois dire que j'ai cherché mais j'ai rien trouvé qui me mette sur la piste de ce que tu me proposes...
Comment fait on un select à partir des balises UL et LI? le select existe toujours non? bref en gros je nage un peu...
Pourrais tu me déposes un bout de code minuscule qui illustre rapidement ta proposition?
Merci
11/05/2006, 11h44
SpaceFrog

la solution que je propose est en remplacement du select ...

il s'agit en fait de jouer dynamiquement sur les propriétés display:non ou inline des li ...

en gros et vite fait mis à part des soucis d'alignement à mettre au point avec des positions absolute et z-index ...

ça pourrait ressembler à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<style type='text/css'>
.showli {display:block;
          }
 
.hideli{display:none;}
 
li {list-style:none;
    cursor:pointer;}
 
ul {border:inset 2px grey;
    width: 150px;
    left:0px;} 
 
 
</style>
<script type='text/javascript'>
function showlis(){
 alllis =document.getElementsByTagName('ul')
 for (i=0;i<alllis.length;i++){
                         alllis[i].className='showli';
                         }
 }
 function hidelis(){
 alllis =document.getElementsByTagName('ul')
 for (i=0;i<alllis.length;i++){
                         alllis[i].className='hidelis';
                         }
 }
 
 function selectli(selection){
    document.getElementById('myselect').value=selection
}
 
function survol(moi){
        moi.style.backgroundColor='navy';
        moi.style.color="white";
        moi.onmouseout=function(){moi.style.backgroundColor='white';
                                      moi.style.color="black";}
                                    }
 
 </script>
 
</head>
 
<body>
<input type='text'  id="myselect" onmouseover='showlis()' onmouseout="hidelis()" />
<ul class="hideli" >
<li onclick='selectli(this.innerHTML)' onmouseover="survol(this)">un</li>
<li onclick='selectli(this.innerHTML)' onmouseover="survol(this)">deux</li>
<li onclick='selectli(this.innerHTML)' onmouseover="survol(this)">trois</li>
<li onclick='selectli(this.innerHTML)' onmouseover="survol(this)">quatre</li>
<li onclick='selectli(this.innerHTML)' onmouseover="survol(this)">cinq</li>
<li onclick='selectli(this.innerHTML)' onmouseover="survol(this)">six</li>
</ul>
</body>
</html>

et là tu gères le onmouseover comme tu veux ...

11/05/2006, 13h22
bavibavi

C'est drole le monde est petit.
J'ai travaillé sur ce pb hier : j'ai réussi sans trop de probleme à faire le mouseover dans les options du select mais cela ne marche pas sous IE (que sous firefox). je voulais faire apparaitre une info en "bulle" mais c'est mal géré. Alors j'ai créé un div à coté qui contient la valeur selon l'option selectionnée, puis qd je choisi l'option (onchange) la valeur reste affichée.

une tite modif du js :

Citation:

Envoyé par SpaceFrog

function hidelis(){
alllis =document.getElementsByTagName('ul')
for (i=0;i<alllis.length;i++){
alllis[i].className='hidelis';
}
}

remplacer :
hidelis par hideli

Pb chez moi : les test zones ne sont pas collées donc on arrive jamais dans la liste, mais meme en les rapprochant (position:absolute;top-22px;) ca ne marche pas car des qu'on sort de la zone de saisie ca masque la liste.
11/05/2006, 13h31
SpaceFrog

oui dsl pour la faute frappe...
pour la position mets le ul dans un div et joue sur les marges et le z-index...
11/05/2006, 14h17
SpaceFrog

oui dsl pour la faute frappe...
pour la position mets le ul dans un div et joue sur les marges et le z-index...
11/05/2006, 14h35
Bartuk

Merci beaucoup pour ces infos!
Je vais regarder tout ça et revenir mettre un tag résolu je l'espère ;)
Merci
11/05/2006, 16h29
Bartuk

Encore merci pour le coup de main, je suis presque arrivé à faire ce que je voulais. Mes infos bulles s'affichent bien quand je passe au dessus de <li> donc c'est bon.

Par contre, il me reste quelques questions...

1 - Je voudrais que les <li> non sélectionnés soient cachés quand je ne suis plus sur le <ul>. J'ai essayé avec un onmouseout, d'abord sur le <ul> puis sur le <li> mais cela fonctionne mal. En effet, si je mets le onmouseout sur le <ul>, il considere que je suis out quand je suis sur un <li>, et quand je mets le onmouseout sur un <li> il considère que je suis out dès lors que je suis sur un auter <li>.... j'espère êter compréhensible :mrgreen:

2 - Les menus "select" passent par dessus la ligne du dessous sans bousculer le reste de l'affichage. Ici, il ne le fait pas. Est ce parceque je n'ai pas encore mis mon ul dans un div? Est ce qu'avec un div il pourra passer en premier plan en passant par dessus la ligne située en dessous?

3 - Avec les "select" quand on tape une lettre de l'alphabet, on arrive directement sur un mot correspondant. Ici, ça ne marche forcément pas... Y a t il un moyen de le reproduire en récupérant les évenements du clavier?

Merci, et après ça, c'est promis, j'arrête de vous embêter :oops:
11/05/2006, 17h23
bavibavi

Citation:

Envoyé par Bartuk

1 - Je voudrais que les <li> non sélectionnés soient cachés quand je ne suis plus sur le <ul>. J'ai essayé avec un onmouseout, d'abord sur le <ul> puis sur le <li> mais cela fonctionne mal. En effet, si je mets le onmouseout sur le <ul>, il considere que je suis out quand je suis sur un <li>, et quand je mets le onmouseout sur un <li> il considère que je suis out dès lors que je suis sur un auter <li>.... j'espère êter compréhensible :mrgreen:

compris, pas de chance :P

Citation:

Envoyé par Bartuk

2 - Les menus "select" passent par dessus la ligne du dessous sans bousculer le reste de l'affichage. Ici, il ne le fait pas. Est ce parceque je n'ai pas encore mis mon ul dans un div? Est ce qu'avec un div il pourra passer en premier plan en passant par dessus la ligne située en dessous?

il faut jouer avec le Z-index, met le a 100 ca devrait suffir autre solution, tu le cré dans le code html apres le reste (c'est pris dans l'ordre d'écriture il me semble)

Citation:

Envoyé par Bartuk

3 - Avec les "select" quand on tape une lettre de l'alphabet, on arrive directement sur un mot correspondant. Ici, ça ne marche forcément pas... Y a t il un moyen de le reproduire en récupérant les évenements du clavier?

oula, tu t'embarques dans quelque chose de bien compliqué !
je te post mon code avec les select

J'ai pê pas tout bien nettoyer mais tu devrais t'en sortir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html>
  <head>
        <style>
          table tr td {border:solid 1px;border-color:#BE3F00}
           .impair {background-color:#E84D00;color:#F7D590;font-weight:bold;}
        </style>
    </head>
    <body>
        <div align="center">    
          <div style="width: 100%;" align="center">
              <table style="text-align: center; border-spacing: 0px;" 0="" cellpadding="0">
          <tr class="impair">
                  <td>
                  <select onchange="descriptifChange('desc');" id="selectBoutique">
                    <option value="0"></option>
                    <option onmouseout="descriptifOption('desc', 'out', 'option1')" onmouseover="descriptifOption('desc', 'over', 'option1')" value="1">boutique 1</option>
                    <option onmouseout="descriptifOption('desc', 'out', 'option2')" onmouseover="descriptifOption('desc', 'over', 'option2')" value="2">boutique 2</option>
                    <option onmouseout="descriptifOption('desc', 'out', 'option3')" onmouseover="descriptifOption('desc', 'over', 'option3')" value="3">boutique 3</option>
                    <option onmouseout="descriptifOption('desc', 'out', 'option4')" onmouseover="descriptifOption('desc', 'over', 'option4')" value="4">boutique 4</option>
                    <option onmouseout="descriptifOption('desc', 'out', 'option5')" onmouseover="descriptifOption('desc', 'over', 'option5')" value="5">boutique 5</option>
                  </select></td>
                  <td width="250">
                    <div id="desc">mon descriptif</div>
                    <div id="option0" style="display: none;">&nbsp;</div>
                    <div id="option1" style="display: none;">mon montexte11</div>
                    <div id="option2" style="display: none;">mon montexte22</div>
                    <div id="option3" style="display: none;">mon montexte33</div>
                    <div id="option4" style="display: none;">mon montexte44</div>
                    <div id="option5" style="display: none;">mon montexte55 sdf sdf sdf sd fsd f sdf sd fsd fsdz y gh fh tey ety</div>
                  </td>
                </tr>
              </table>
            <script language="javascript">
              function descriptifOption(id, display, text){
                  document.getElementById(id).innerHTML = document.getElementById(text).innerHTML;
                  if (display == "over") {
                    document.getElementById(id).display = "none";
                  } else {
                    document.getElementById(id).display = "block";
                  }
              }
              function descriptifChange(id){
                  var optionValue = "option"+document.getElementById("selectBoutique").value;
                  document.getElementById(id).innerHTML = document.getElementById(optionValue).innerHTML;
              }
            </script>
      </div>
    </div>
  </body>
</html>

sous firefox c sympa

11/05/2006, 17h38
Bartuk

Merci pour ton code, c'est exactement ce que je voulais faire à la base... le seul "hic" vient de IE... ça ne marche que sous Firefox (moi ca me dérangerais pas mais bon...:roll: )

C'est vrai que du coup contourner le problème comme j'ai commencé à le faire donne quelquechose d'assez compliqué au final...

Si quelqu'un a la solution qui permettrait d'utiliser le code de bavibavi sous IE je suis preneur (et lui aussi je pense ;) )

Merci
11/05/2006, 17h43
bavibavi

moi aussi suis preneur lol