rollover et liste déroulante -> c'est moche

rollover et liste déroulante -> c'est moche - HTML/CSS - Programmation

Marsh Posté le 07-06-2004 à 10:58:10    

salut,
je veux faire une infobulle avec un rollover, le pb c'est que si y'a une liste déroulante a proximité, c'est tout moche il est "encastré" dans l'infobulle comme sur ce site : http://www.toutjavascript.com/main/search.php3 si vous survolez le menu -> Les Scripts.  
Y'a t-il une solution ?
Le script utilisé :

Code :
  1. <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  2. //D'autres scripts sur http://www.toutjavascript.com
  3. //Si vous utilisez ce script, merci de m'avertir !  < webmaster@toutjavascript.com >
  4. //Auteur original :Olivier Hondermarck  <webmaster@toutjavascript.com>
  5. //Modifs compatibilité Netscape 6/Mozilla : Cédric Lamalle 09/2001 <cedric@cpac.embrapa.br>
  6. //Correction Mac IE5 (Merci Fred)
  8. var IB=new Object;
  9. var posX=0;posY=0;
  10. var xOffset=10;yOffset=10;
  11. function AffBulle(texte) {
  12.   contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;";
  13.   var finalPosX=posX-xOffset;
  14.   if (finalPosX<0) finalPosX=0;
  15.   if (document.layers) {
  16.     document.layers["bulle"].document.write(contenu);
  17.     document.layers["bulle"].document.close();
  18.     document.layers["bulle"].top=posY+yOffset;
  19.     document.layers["bulle"].left=finalPosX;
  20.     document.layers["bulle"].visibility="show";}
  21.   if (document.all) {
  22.     //var f=window.event;
  23.     //doc=document.body.scrollTop;
  24.     bulle.innerHTML=contenu;
  25.     document.all["bulle"].style.top=posY+yOffset;
  26.     document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
  27.     document.all["bulle"].style.visibility="visible";
  28.   }
  29.   //modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
  30.   else if (document.getElementById) {
  31.     document.getElementById("bulle" ).innerHTML=contenu;
  32.     document.getElementById("bulle" ).style.top=posY+yOffset;
  33.     document.getElementById("bulle" ).style.left=finalPosX;
  34.     document.getElementById("bulle" ).style.visibility="visible";
  35.   }
  36. }
  37. function getMousePos(e) {
  38.   if (document.all) {
  39.   posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement
  40.   posY=event.y+document.body.scrollTop;
  41.   }
  42.   else {
  43.   posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
  44.   posY=e.pageY;
  45.   }
  46. }
  47. function HideBulle() {
  48. if (document.layers) {document.layers["bulle"].visibility="hide";}
  49. if (document.all) {document.all["bulle"].style.visibility="hidden";}
  50. else if (document.getElementById){document.getElementById("bulle" ).style.visibility="hidden";}
  51. }
  53. function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
  54. IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
  55. if (document.layers) {
  56.  window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
  57.  document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>" );
  58. }
  59. if (document.all) {
  60.  document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>" );
  61.  document.onmousemove=getMousePos;
  62. }
  63. //modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
  64. else if (document.getElementById) {
  65.         document.onmousemove=getMousePos;
  66.         document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>" );
  67. }
  69. }
  71. </SCRIPT>


marci d'avance

Reply

Marsh Posté le 07-06-2004 à 10:58:10   

Reply

Marsh Posté le 07-06-2004 à 14:02:34    

:o

Reply

Marsh Posté le 07-06-2004 à 14:08:40    

Non. Apprend le JS. On ne debbugue pas les scripts pris ici où là.

Reply

Marsh Posté le 07-06-2004 à 14:40:34    

exact, j'ai un besoin ponctuel en js mais je vais me taper toute la doc! je préfere consacrer mes efforts à apprendre le php! Apprend, apprend, c'est facile de dire çà, si j'avais le temps, je pourrais en apprendre des choses :)

Reply

Marsh Posté le 07-06-2004 à 15:40:22    

Pas de probleme d'affichage avec le dernier mozilla. Peut etre le z-index de ton div qu'il faudrait positionner par rapport aux autres éléments.
EDIT: en fait si j'ai dis une connerie, le pb est bien la


Message édité par boulax le 07-06-2004 à 21:01:21

---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 07-06-2004 à 16:54:33    

arf, merci je regarderais quand j'aurais le temps :)

Reply

Marsh Posté le 07-06-2004 à 19:13:02    

Que c'est sale...

Reply

Marsh Posté le 07-06-2004 à 19:23:52    

Nan, spa possible :o
 
En gros t'as 2 types d'éléments dans une fenêtre :
 
les windowless, l'élément est dessiné dans la fenêtre courante, qui sont les tableaux, les div, les champs de saisie, etc...
 
et les windowed, une nouvelle fenêtre est créée, ce sont les frame et iframe, les listes déroulante, etc...
 
Et les éléments windowed sont TOUJOURS par dessus les éléments windowless. Après  tu peux modifier le z-index, mais celui-ci n'est actif qu'entre des éléments de même type (windowledd, ou windowed)....
 
EDIT : et si jamais y'a moyen de contourner ca, je suis preneur :D


Message édité par harrysauce le 07-06-2004 à 19:24:53
Reply

Marsh Posté le 07-06-2004 à 21:10:22    

A mon avis le mieux c'est de contourner ca en obligeant les listes deroulantes a se fermer lorsque tu passes sur ton menu. Apres tout le type qui fait ca il va pas bien, si tu déroule une liste c'est pour faire un choix... Reste a trouver si en Js tu peu fermer de maniere pas trop brutale une combo box.
Sinon tu peu toujours forcer le selectedIndex mais c'est pas dit que ca fermera effecetivement la liste... A tester ...


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 07-06-2004 à 22:16:37    

boulax a écrit :

A mon avis le mieux c'est de contourner ca en obligeant les listes deroulantes a se fermer lorsque tu passes sur ton menu. Apres tout le type qui fait ca il va pas bien, si tu déroule une liste c'est pour faire un choix... Reste a trouver si en Js tu peu fermer de maniere pas trop brutale une combo box.
Sinon tu peu toujours forcer le selectedIndex mais c'est pas dit que ca fermera effecetivement la liste... A tester ...


 :non:  
Ca le fait liste non déroulée, et le seul moyen serait de cacher la liste déroulante, et non la fermer :o

Reply

Marsh Posté le 07-06-2004 à 22:16:37   

Reply

Marsh Posté le 07-06-2004 à 22:23:04    

harrysauce a écrit :

:non:  
Ca le fait liste non déroulée


pas avec mozilla...


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 07-06-2004 à 23:25:12    

boulax a écrit :

pas avec mozilla...

oui mais mozilla est pas utilisé par 90% des internautes [:spamafote]

Reply

Marsh Posté le 07-06-2004 à 23:29:07    

harrysauce a écrit :

oui mais mozilla est pas utilisé par 90% des internautes [:spamafote]


 
ce qu'il faut retenir c'est que c'est peut etre une interpretation differente d'un parametre css non renseigné qui fait que sur mozilla c'est affiché correctement.
 


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 08-06-2004 à 01:17:58    

boulax a écrit :

ce qu'il faut retenir c'est que c'est peut etre une interpretation differente d'un parametre css non renseigné qui fait que sur mozilla c'est affiché correctement.


 

harrysauce a écrit :

Nan, spa possible :o
 
En gros t'as 2 types d'éléments dans une fenêtre :
 
les windowless, l'élément est dessiné dans la fenêtre courante, qui sont les tableaux, les div, les champs de saisie, etc...
 
et les windowed, une nouvelle fenêtre est créée, ce sont les frame et iframe, les listes déroulante, etc...
 
Et les éléments windowed sont TOUJOURS par dessus les éléments windowless. Après  tu peux modifier le z-index, mais celui-ci n'est actif qu'entre des éléments de même type (windowledd, ou windowed)....
 
EDIT : et si jamais y'a moyen de contourner ca, je suis preneur :D


Et mozilla doit gérer ca différement....


Message édité par harrysauce le 08-06-2004 à 01:18:31
Reply

Marsh Posté le 08-06-2004 à 15:47:28    

deja merci de vos réponses!
j'ai regardé de mon côté et effectivement c'est pas simple!
j'ai vu comme harrysauce l'a dit, que certains "jouaient" sur le z-index, mais avec un browser basé sur gecko, c'est bof. c'est dommage car ce systeme d'infobulle était bien pratique! je ne suis pas un adepte du js mais comme c'est pour faire un test ou on choisit la réponses dans une liste déroulante, ce systeme me permettait de détailler la question quand on passait dessus. D'ailleurs si quelqu'un a une idée conceptuelle pour remplacer ca, je suis preneur :)


Message édité par $man le 08-06-2004 à 15:47:58
Reply

Sujets relatifs:

Leave a Replay

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