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

**Bartuk** · 11/05/2006, 10h03

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?

Merci pour vos réponses

**SpaceFrog** · 11/05/2006, 10h36

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 ...

**Bartuk** · 11/05/2006, 11h40

Tout d'abord merci pour la réponse.
Par contre je suis un peu nul en JS-HTML

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

**SpaceFrog** · 11/05/2006, 11h44

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 ...

**SpaceFrog** · 11/05/2006, 12h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**bavibavi** · 11/05/2006, 13h22

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 :

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.

**Bartuk** · 11/05/2006, 17h38

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...

)

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

**bavibavi** · 11/05/2006, 17h43

moi aussi suis preneur lol

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager