onmouseover sur option

**Aurélie38** · 27/02/2008, 15h38

Bonjour a tous,

Je crois que c'est un problème récurrent mais j'ai pas vraiment trouvé la solution.

En fait, je voudrais effectuer une action au passage de la souris sur une balise option. L'action a effectuer doit utiliser le texte affiché dans l'option.

Un genre de :

Code :

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

1
2
3
4
5
<select id="select">
<option value="1" onmouseover="alert('option1')" > option 1 </option>
<option value="2" onmouseover="alert('option1')" > option 2 </option>
<option value="3" onmouseover="alert('option1')" > option 3 </option>
</select>

Ce qui marche très bien sous firefox mais ça ne marche pas sous IE6 ( ce qui m'est obligatoire).

Est ce que quelqu'un a une idée sur le sujet??

Merci d'avance.

**Pilhole** · 27/02/2008, 15h42

Le JavaScript étant sensible à la casse tu pourrais tester plusieurs solutions:

onMouseover ou onMouseOver

et n'oublie pas le ;

Moi j'écrirais :

Code :

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

<option value="1" onMouseOver="alert('option1');" > option 1 </option>

Je sais pas si ça va t'aider.

**E.Bzz** · 27/02/2008, 15h46

Bonjour,

Envoyé par Aurélie38

Ce qui marche très bien sous firefox mais ça ne marche pas sous IE6 ( ce qui m'est obligatoire).

Oui, mais non : pas possible avec IE6

Quant aux problèmes de casse, il n'y a pas tant de choix à faire : c'est toujours en minuscules.

A+

**SpaceFrog** · 27/02/2008, 15h47

pas possible sous IE...

il doit y avoir sur le forulm des propositions d'emulation de select à partir de ul et li ...
et pour le coup un li accèpte le onmouseover

**Aurélie38** · 27/02/2008, 15h49

merci a tous pour vos réponses,

bon... bah je vais investiguer alors ...

**Aurélie38** · 27/02/2008, 16h50

je connais pas grand chose au Web mais y'aurait pas moyen de le faire en css?

parcequ'en fait y'a déjà un existant et je peux pas trop trop modifier comme integrer des li.

merci

**SpaceFrog** · 27/02/2008, 17h46

non

**Auteur** · 27/02/2008, 19h24

l'attribut title dans la balise option fonctionne sous IE 6 ?

Code html :

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

1
2
3
4
5
6
7
8
 
<select size="1" style="width: 110px">
    <option selected="selected" value="" title="un test 1">Option 1</option>
    <option value="" title="un test 2">Option 2</option>
    <option value="" title="un test 3">Option 3</option>
    <option value="" title="un test 4">Option 4</option>
    <option value="" title="un test 5">Option 5</option>
</select>

[edit]
je viens de voir une discussion archivée, title ne fonctionne qu'à partir IE 7

[/edit]

**Aurélie38** · 28/02/2008, 11h45

Ok,

Bon du coup j'ai investigué sur l'émulation du select avec des ul et li. Ce qui marche bien du coup mais ça cause trop d'impacts sur l'existant, donc c'est une solution sous le coude mais que je vais pas implementer encore

.

Je donne quand même la solution, avec une librairie js tooltip récup sur le net:

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
<script type="text/javascript" src="tooltip_1.1/tooltip.js"></script>
  <link rel="stylesheet" type="text/css" href="tooltip_1.1/tooltip.css" />
  <script type="text/javascript">
 
 
 
    var select = null;
 
    function selectOptionClick(id){
      var optionTag = document.getElementById(id);
      if(select == null){
        select = id;
        optionTag.style.backgroundColor="blue";
       // alert('On selectionne loption on sauvegarde la valeur: ' +optionTag.innerHTML);
      }else{
	 // alert('coucou');
		var ancienoptionTag = document.getElementById(select);
	    ancienoptionTag.style.backgroundColor="white";
		select = id;
       // alert('On desselectionne loption on efface la valeur: ' +optionTag.innerHTML);
		optionTag.style.backgroundColor="blue";
       // alert('On selectionne loption on sauvegarde la valeur: ' +optionTag.innerHTML);
 
 
 
      }
    }
  </script> 
  </head>
  <body>
  <div id="tooltip"></div>
      <ul id="list">
        <li title="1" id="id1" onclick="selectOptionClick('id1');" onmouseout="tooltip.hide(this);" onmouseover="tooltip.show(this);">value 1</li>
        <li title="2" id="id2" onclick="selectOptionClick('id2');" onmouseout="tooltip.hide(this);" onmouseover="tooltip.show(this);">value 2</li>
        <li title="3" id="id3" onclick="selectOptionClick('id3');" onmouseout="tooltip.hide(this);" onmouseover="tooltip.show(this);">value 3</li>
        <li title="4" id="id4" onclick="selectOptionClick('id4');" onmouseout="tooltip.hide(this);" onmouseover="tooltip.show(this);">value 4</li>
        <li title="5" id="id5" onclick="selectOptionClick('id5');" onmouseout="tooltip.hide(this);" onmouseover="tooltip.show(this);">value 5</li>
      </ul>
  </body>

C'est l'attribut "title" qui est affiché en info bulle.

A+

onmouseover sur option

JavaScript

Discussions similaires

Partager

Partager