onMouseOver sur <OPTION>

onMouseOver sur <OPTION> - HTML/CSS - Programmation

Marsh Posté le 28-02-2005 à 18:10:22    

Bonjour,
 
   Dans une liste déroulante, lorqu'un élément est sélectionné, je souhaiterais afficher dans une cellule d'un tableau des informations sur cet élément. Pour cela, j'utilise l'évènement Javascript "onMouseOver", puis un innerHTML.
 

Code :
  1. ************
  2. ***** SCRIPT
  3. ************
  4. print "<SCRIPT LANGUAGE = JavaScript>\n";
  5. print "function affiche(type){\n";
  6. print "document.getElementById('cellule1').innerHTML = \"<B>\"+type+\"</B>\";\n";
  7. print "}\n";
  8. print "</SCRIPT>\n";
  11. ********
  12. *****CGI
  13. ********
  14. print "<TABLE BORDER = 2 WIDTH = 90% BGCOLOR = #eeeeee BORDERCOLOR = #0000FF>\n";
  15. print "<TR><TD>";
  16. print $page->start_form(-method=>'post');
  19. print "<SELECT NAME = \"list\">";
  20. print "<OPTION onMouseOver=\"affiche('tata')\"; VALUE = \"tata\">tata</OPTION>\n";
  21. print "<OPTION onMouseOver=\"affiche('tete')\"; VALUE = \"tete\">tete</OPTION>\n";
  22. print "<OPTION onMouseOver=\"affiche('titi')\"; VALUE = \"titi\">titi</OPTION>\n";
  23. print "<OPTION onMouseOver=\"affiche('toto')\"; VALUE = \"toto\">toto</OPTION>\n";
  24. print "<OPTION onMouseOver=\"affiche('tutu')\"; VALUE = \"tutu\">tutu</OPTION>\n";
  25. print "</SELECT>";
  27. print $page->end_form;
  28. print "</TD><TD id = \"cellule1\"> </TD></TR>";
  29. print "</TABLE>\n";


 
 
Tout marche correctement sous Netscape mais pas sous IE :fou:. J'ai essayé de mettre le onMouseOver sur le select, mais ça n'y change rien. J'ai essayé beaucoup de solution sans pour autant en trouver une bonne  :fou:  
 
Voyez-vous quel est le problème ou avez-vous une solution pour remedier à cela.
 
Merci d'avance
Manu

Reply

Marsh Posté le 28-02-2005 à 18:10:22   

Reply

Marsh Posté le 01-03-2005 à 17:00:54    


tu peux pas utiliser l'evenemnt onMouseOver sur des <option> car les <option> font partir de la balise <select>. l'evenement sera toujours relatif au <select>
 
voici un code qui se rapproche le mieux de ce qui a mon avis t'interesse:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<select name="select" size="4" onChange="document.getElementById('affiche').innerHTML=this.value">
  <option value="dix" >dix</option>
  <option value="vingt" >vingt</option>
  <option value="trente" >trente</option>
  <option value="quarante" >quarante</option>
</select>
<div id="affiche"></div>
</body>
</html>

Reply

Marsh Posté le 01-03-2005 à 17:08:02    

Merci pour ces renseignements  :)  
 
Et oui, après deux journées de recherches, je n'ai toujours pas trouvé mieux que le onchange sur l'élément SELECT.
Le problème, c'est que cela oblige l'utilisateur à cliquer sur l'OPTION.
 
Donc, pour le moment, j'utilise un onMouseOver sur les options (bien interpréter par Netscape et Mozilla) et j'ai ajouter un onchange sur le select pour Opera et IE.
Du coup, cela me pose quelques problèmes supplémentaires vu que je voulais passer à la fonction affiche d'autres paramètres que le nom, mais ça c'est une uatre histoire.....

Reply

Marsh Posté le 01-03-2005 à 17:17:48    

ahh ca les histoires entre IE/MOzilla et Nescape ca date pas d'hier.
c toujours aussi chiant on c jamais si ca va marcher sur l'un ou sur l'autre.
eventuellement, utilise autre chose que des <options>
sinon tu a dit que la contrainte c que lutilisateur il doit cliquer sur la liste. Dans ce cas tu peux mettre le focus sur la liste dès le chargement de la page, ainsi l'utlisateur a plus ka utiliser les fleches de direction.
 
enfin tout depend apres du contexte de ton projet...


Message édité par jokaritaff le 01-03-2005 à 17:18:45
Reply

Marsh Posté le 01-03-2005 à 17:19:59    

Charlux a écrit :

Bonjour,
 
   Dans une liste déroulante, lorqu'un élément est sélectionné, je souhaiterais afficher dans une cellule d'un tableau des informations sur cet élément. Pour cela, j'utilise l'évènement Javascript "onMouseOver", puis un innerHTML.
 

Code :
  1. ************
  2. ***** SCRIPT
  3. ************
  4. print "<SCRIPT LANGUAGE = JavaScript>\n";
  5. print "function affiche(type){\n";
  6. print "document.getElementById('cellule1').innerHTML = \"<B>\"+type+\"</B>\";\n";
  7. print "}\n";
  8. print "</SCRIPT>\n";
  11. ********
  12. *****CGI
  13. ********
  14. print "<TABLE BORDER = 2 WIDTH = 90% BGCOLOR = #eeeeee BORDERCOLOR = #0000FF>\n";
  15. print "<TR><TD>";
  16. print $page->start_form(-method=>'post');
  19. print "<SELECT NAME = \"list\">";
  20. print "<OPTION onMouseOver=\"affiche('tata')\"; VALUE = \"tata\">tata</OPTION>\n";
  21. print "<OPTION onMouseOver=\"affiche('tete')\"; VALUE = \"tete\">tete</OPTION>\n";
  22. print "<OPTION onMouseOver=\"affiche('titi')\"; VALUE = \"titi\">titi</OPTION>\n";
  23. print "<OPTION onMouseOver=\"affiche('toto')\"; VALUE = \"toto\">toto</OPTION>\n";
  24. print "<OPTION onMouseOver=\"affiche('tutu')\"; VALUE = \"tutu\">tutu</OPTION>\n";
  25. print "</SELECT>";
  27. print $page->end_form;
  28. print "</TD><TD id = \"cellule1\"> </TD></TR>";
  29. print "</TABLE>\n";


 
 
Tout marche correctement sous Netscape mais pas sous IE :fou:. J'ai essayé de mettre le onMouseOver sur le select, mais ça n'y change rien. J'ai essayé beaucoup de solution sans pour autant en trouver une bonne  :fou:  
 
Voyez-vous quel est le problème ou avez-vous une solution pour remedier à cela.
 
Merci d'avance
Manu


 
 
Faut faire un sélect artificiel à base d'un div display : none; qui passe à block en cas de onclick du haut du pseudo-sélect. Ensuite, les options seront avantageusement décrites par une liste par exemple...


---------------
Expert en expertises
Reply

Marsh Posté le 01-03-2005 à 17:22:24    

ta pas une page ou une capture de ton projet avec commentaires a l'appui ?
pour ce qui est de faire passer ton div de DISPLAY à BLOCK, le DHTML est ton ami ;-)

Reply

Marsh Posté le 01-03-2005 à 17:37:06    

jokaritaff a écrit :

ta pas une page ou une capture de ton projet avec commentaires a l'appui ?
pour ce qui est de faire passer ton div de DISPLAY à BLOCK, le DHTML est ton ami ;-)


 
C'est à moi que tu parles ?  :o


---------------
Expert en expertises
Reply

Marsh Posté le 01-03-2005 à 17:38:47    

Hermes le Messager a écrit :

C'est à moi que tu parles ?  :o


 
me suis planté de ligne/pseudo  
arfff


Message édité par jokaritaff le 01-03-2005 à 17:39:40
Reply

Sujets relatifs:

Leave a Replay

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