11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour.
Comme l'indique le titre, j'aimerais un menu en arborescence en listes déroulantes, en gros, un menu de base qui indique des options, si l'on choisit entre une des options, le second menu se forme et se remplit d'options et lorsque l'on choisit une seconde option, l'image correspondante s'affiche.

Pour ce faire, le net regorde de scripts déjà tout fait, donc, normalement, pas de problèmes... Normalement, puisque j'y ai quelques exigences ^^
En effet, déjà, je ne récupère pas les données via une bdd mais via des dossiers, de plus, mon codage est un peu... Particulier, puisque, à mes débuts, on m'a appris à tout mettre dans une variable que l'on appelle une fois (ceci afin d'avoir des titres clairs, l'idée est ingénieuse d'un côté mais pas terrible au final puisque le code en devient plutôt mauvais).

<SCRIPT LANGUAGE="JavaScript">
var menu=new CreerMenu(2,"Continent","Pays","titre 3","titre 4","self");';


$tab_dossiers = array();
//J'ouvre le dossier qu'il faut
if ($rep = opendir("Elements/Drapeaux/")){
//je liste tout les dossiers qu'il y'a et j'en fais une boucle
   while ($files = readdir($rep)) {
         if (is_dir($rep)) {
         $tab_dossiers[] = $files;

         $Theme.= 'menu.Add(1,"$files","");';
            $filesCon = glob("Elements/Drapeaux/$files/*.*");

            foreach ($filesCon as $filenameCon) {
//ce code sert à récupérer le nom du fichier sans son extension
            $filenomCon=basename($filenameCon);
            $filenaCon=strpos("$filenomCon",".");
            $fileRnomCon=substr("$filenomCon",0,$filenaCon);

              menu.Add(2,"$fileRnomCon","");
            }
         }
   }
}
$Theme.= '
function CreerMenu(profondeur,titre1,titre2,titre3,titre4,target) {
  this.nb=0;this.prof=profondeur;
  this.titre1=titre1; this.titre2=titre2; this.titre3=titre3; this.titre4=titre4; this.target=target
  this.Add=AddObjet;
  this.Aff=AffMenu;
}
function AddObjet(deep,txt,page) {
  var rub = new Object;
  rub.deep=deep;
  rub.txt=txt;
  rub.page=page;
  this[this.nb]=rub;
  this.nb++;
}
function AffMenu() {
  var Z="<FORM name=\'mf\'>";
  Z+="<SELECT size=1 name=\'list1\' onChange=\'Clic(1)\'><OPTION selected>"+this.titre1+"</OPTION>";
  for (var i=0;i<this.nb;i++) {
    if (this[i].deep==1) {
      Z+="<OPTION value=\'"+i+"\'>"+this[i].txt+"</OPTION>"
    }
  }
  Z+="</SELECT>";
  for (var i=2;i<=menu.prof;i++) {
    Z+="<SELECT name=\'list"+i+"\' onChange=\'Clic("+i+")\'><OPTION>"+eval("menu.titre"+i)+"</OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION></SELECT>";
  }
  Z+="</FORM>";
  document.write(Z);
}
function add() {
  var c=new Option("ADD","",true,true);
  document.forms[0].elements["list"].options[0]=c;
}
function Clic(no) {
  var valeur=document.forms["mf"].elements["list"+no].options[ document.forms["mf"].elements["list"+no].selectedIndex].value;
  if ((valeur!="")&&(valeur!=null)&&(no<menu.prof)) {
    var deep=menu[valeur].deep;
    var no2=1;
    for (var noX=(no+1);noX<=menu.prof;noX++) {
      document.forms["mf"].elements["list"+eval(noX)].options.length=0;
      var titre=eval("menu.titre"+noX);
      var c=new Option(titre);
      document.forms["mf"].elements["list"+(noX)].options[0]=c;
      document.forms["mf"].elements["list"+(noX)].selectedIndex=0;
    }
    valeur++;
    for (var i=valeur;i<menu.nb;i++) {
      //alert(i);
      if (menu[i].deep==deep+1) { 
        //alert("no="+no+" texte="+menu[i].txt);
        var c=new Option(menu[i].txt,i);
        document.forms["mf"].elements["list"+(no+1)].options[no2]=c;
        no2++;
      } else { if (menu[i].deep==deep){i=menu.nb;}}
    }
    document.forms["mf"].elements["list"+(no+1)].options.length=no2+1;
    document.forms["mf"].elements["list"+(no+1)].selectedIndex=0;
    Clic(no+1)
    valeur--;
  }
  if ((valeur!="")&&(valeur!=null)) {
    var page=menu[valeur].page;
    if ((page!="")&&(page!=null)) {
      if (menu.target=="self") {window.location=page}
      else if (menu.target=="_blank") {window.open(page,"","menubar,scrollbars,toolbar,status,location")}
      else {parent.frames[menu.target].location.href=page;}
    }
  }
}
</script>

//Bon ben là, vu que le code correspondant à $fileRnomCon se trouve dans la boucle, une erreur apparait et l'image n'apparait pas...
<img src="'.$fileRnomCon.'" />


Avec ce code, rien n'apparait, ni l'image, ni aucun menu... Si quelqu'un a des pistes, des idées, des suggestions, n'hésitez surtout pas, d'avance merci. [/i][/i][/i][/i][/i][/i]
Hi,
bon, peut être ai-je mis trop de code, ou je ne suis pas assez clair ? J'avoue que j'ai fait ce post assez rapidement, donc si il n'est pas compréhensible, n'hésitez pas à me le dire, je tacherais de faire un post plus clair.
Je reretente parce que je n'y arrive vraiment pas... Il faut dire que je n'y connais pas grand chose en javascript, d'où une certaine difficulté.