Liste déroulante Javascript

[Résolu]
Signaler
Messages postés
5
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
13 juillet 2007
-
Messages postés
5
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
13 juillet 2007
-
Bonjour
Je souhaite modifier le style et en particulier remplacer la fleche par une image d'une liste déroulante.
Le standard n'a rien de bien personnel et cela fait trop "déjà vu".
Merci de vos réponses

6 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    rien ne vaut une doc :
       http://fr.selfhtml.org/html/formulaires/choix.htm#autres_infos
       http://fr.selfhtml.org/css/proprietes/fenetreaffichage.htm#cursor
       ...

    celle-ci est en français, gratis, téléchargeable, version .chm et .htm
   

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
5
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
13 juillet 2007

Aille désolé, je m'étais mal exprimé. Ce que je recherchais, c'est changer le style d'une liste déroulante, en changeant la fleche permettant d'acceder aux info. J'ai finalement trouvé alors pour les interessé, je vous fait par de mon lien :
http://www.hexadec.ch/hexalab/upload/File/tamingselect/
Merci de ta réponse.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
ben oui... mes liens étaient vers les explications pour comment faire ça...
<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
5
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
13 juillet 2007

Ben non, tes liens me montraient comment changer le curseur de ma souris, mais ce n'est pas ce que je veux, regarde le lien que je t'ai envoyé et tu comprendra mieux. La liste déroulante à une style spéciale.
Messages postés
5
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
13 juillet 2007

Heum je reviens parce que j'ai encore un problème, j'ai en faite deux fonctions javascript, mais j'arrive pas à faire marcher les deux en meme temps. C'est soit l'une, soit l'autre. Je ne comprends pas bien pour quoi, vu que je ne connais pas le javascript.
Voici mes fichiers que j'appelle en début de page :
function tamingselect()
{
  if(!document.getElementById && !document.createTextNode){return;}
  
// Classes for the link and the visible dropdown
  var ts_selectclass='turnintodropdown';   // class to identify selects
  var ts_listclass='turnintoselect';    // class to identify ULs
  
  var ts_boxclass='dropcontainer';     // parent element
  var ts_triggeron='activetrigger';     // class for the active trigger link
  var ts_triggeroff='trigger';      // class for the inactive trigger link
  var ts_dropdownclosed='dropdownhidden'; // closed dropdown
  var ts_dropdownopen='dropdownvisible';  // open dropdown
/*
  Turn all selects into DOM dropdowns
*/
  var count=0;
  var toreplace=new Array();
  var sels=document.getElementsByTagName('select');
  for(var i=0;i<sels.length;i++){
    if (ts_check(sels[i],ts_selectclass))
    {
      var hiddenfield=document.createElement('input');
      hiddenfield.name=sels[i].name;
      hiddenfield.type='hidden';
      hiddenfield.id=sels[i].id;
      hiddenfield.value=sels[i].options[0].value;
      sels[i].parentNode.insertBefore(hiddenfield,sels[i])
      var trigger=document.createElement('a');
      ts_addclass(trigger,ts_triggeroff);
      trigger.href='#';
      trigger.onclick=function(){
        ts_swapclass(this,ts_triggeroff,ts_triggeron)
        ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
        return false;
      }
      var arrow=document.createElement('div');
      arrow.className = "arrow";
      trigger.appendChild(arrow);
      trigger.appendChild(document.createTextNode(sels[i].options[0].text));
      sels[i].parentNode.insertBefore(trigger,sels[i]);
      var replaceUL=document.createElement('ul');
      for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
      {
        var newli=document.createElement('li');
        var newa=document.createElement('a');
        newli.v=sels[i].getElementsByTagName('option')[j].value;
        newli.elm=hiddenfield;
        newli.istrigger=trigger;
        newa.href='#';
        newa.appendChild(document.createTextNode(
        sels[i].getElementsByTagName('option')[j].text));
        newli.onclick=function(){ 
          this.elm.value=this.v;
          ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
          ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
          this.istrigger.lastChild.nodeValue=this.firstChild.firstChild.nodeValue;
          return false;
        }
        newli.appendChild(newa);
        if(sels[i].getElementsByTagName('option')[j].selected) {
          newli.elm.value=newli.v;
          trigger.lastChild.nodeValue=newli.firstChild.firstChild.nodeValue;
        }
        replaceUL.appendChild(newli);
      }
      ts_addclass(replaceUL,ts_dropdownclosed);
      var div=document.createElement('div');
      div.appendChild(replaceUL);
      ts_addclass(div,ts_boxclass);
      sels[i].parentNode.insertBefore(div,sels[i])
      toreplace[count]=sels[i];
      count++;
    }
    
  }

/*
  Turn all ULs with the class defined above into dropdown navigations
*/  

  var uls=document.getElementsByTagName('ul');
  for(var i=0;i</script>		
<script type="text/javascript" src="listed.js"></script>

Le javascript de listed.js fonctionnera, mais si je fais sa :
<script type="text/javascript" src="listed.js"></script>
<script type="text/javascript" src="onglet.js"></script>	

C'est celui de onglet.js qui fonctionnera.
J'ai testé quelque truc, et j'ai bien cru comprendre que c'est du a la fonction window.onload que il y a un problème.
Comment faire ?
Merci d'avance
Messages postés
5
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
13 juillet 2007

Aille, désolé pour l'ilisibilité de mon message, mais je n'arrive pas a ouvrir une balise code :x