begin process at 2012 05 29 14:24:48
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Archive Javascript

 > 

Archives

 > 

AU SECOURS !!!

 > 

je vous colle avec cette triple liste deroulante , hein !


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

je vous colle avec cette triple liste deroulante , hein !

samedi 14 janvier 2006 à 00:54:02 | je vous colle avec cette triple liste deroulante , hein !

frvfrvfrvfrv

je veux faire apparaitre une image selon une triple liste deroulante.
l'image change selon la selection, et ceci avant d'activer le fichier html attaché.
Si vous avez une idée !
le code épurer pour vous:

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

var menu=new CreerMenu(
3," groupe "," sous groupe "," img final ","titre 4","self");

menu.Add(
1,"groupe a",""); // avoir une image du groupe a

menu.Add(
2,"sous groupe 1",""); // avoir une image sous groupe 1
menu.Add(
3,"img a 1","html1.html"); // avoir une image img a 1
menu.Add(
3,"img b 1","html2.html"); // avoir une image img b 1
menu.Add(
2,"sous groupe 2","");
menu.Add(
3,"img a 2","html3.html");
menu.Add(
3,"img b 2","html4.html");
menu.Add(
1,"groupe b","");
menu.Add(
2,"sous groupe 1","");
menu.Add(
3,"img b 1","html5.html");
menu.Add(
3,"img b 1","html6.html");
menu.Add(
2,"sous groupe 2","");
menu.Add(
3,"img b 2","html7.html");
menu.Add(
3,"img b 2","html8.html");
menu.Add(
3,"img b 2","html9.html");
menu.Add(
3,"img b 2","html10.html");
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>
</HEAD>
<body leftmargin=0 marginwidth=0 bgcolor="#FFFFFF" vlink="#0000A0" link="#0000FF" scroll="no">
<base target="_this">

<div id="vil" style="position:absolute; top:80%; left:45%; z-index:3;">
<img name="imag" src="dfg.gif" alt="img change selon select">
</div>
// c'est cette image qui doit changer ...

<div id="conteneur" style="position:absolute; top:40%;left:24%;z-index:2;">
<SCRIPT language="JavaScript">
menu.Aff();
</SCRIPT>
</div>
<script>
function change_site() {
var site = document.menu.popup.selectedIndex;
{
window.location.href =
document.menu.popup.options[site].value;
}
}
</script>
</BODY>
</HTML>

samedi 14 janvier 2006 à 15:25:30 | Re : je vous colle avec cette triple liste deroulante , hein !

xdoume

Salut

pourquoi ne pas faire tout simplement un
document.getElementById("imag").src = document.forms["mf"].elements["list2"].value

Vincent Demay
[ Lien ]

samedi 14 janvier 2006 à 17:15:46 | Re : je vous colle avec cette triple liste deroulante , hein !

frvfrvfrvfrv

bonjour a toi,
merci , pour ton aide,
mais que veux tu dire? où mettre getelementbyid !
samedi 14 janvier 2006 à 19:15:13 | Re : je vous colle avec cette triple liste deroulante , hein !

xdoume

Si j'ai bien compris, ton but est de changer l'image en fonction de tes selections dans tes listeBox. Si c'est ca tu mais le document.getElementById... sur le on change de ta derniere listBox

Vincent Demay
[ Lien ]

dimanche 15 janvier 2006 à 00:50:46 | Re : je vous colle avec cette triple liste deroulante , hein !

frvfrvfrvfrv

bonjour ou bonsoir,

Merci de l'interet que tu porte a mon modeste projet.
je sais que je suis pas bien fort dans le script,
mais peux  tu me faire un exemple , par exemple en prenant un morceau du script et y integrer ton idée.
si tu as le temp....
ca serais sympathique,

merci à toi.

cordialement.

NB. il serais meme judicieux de ma part de signaler que je souhaite une image diferente pour les deux premiere selection, car la troisieme peu directement active le fichier html. car lui a deja son image.

merci, si je me suis bien exprimer.

dimanche 15 janvier 2006 à 15:07:14 | Re : je vous colle avec cette triple liste deroulante , hein !

xdoume

Réponse acceptée !
Salut;
est ce que ce que tu veux faire c'est  :
1/ quand tu changes la selection de ta premiere liste, tu affciche l'image correspondante à ta selection dans la liste1,
2/ quand tu change la selection de ta seconde liste, tu affiche l'image correspondante à ta selection dans ta seconde liste
3/ de meme avec la liste 3

dans ce cas tu peux faire ca (en ayant des images groupe a.gif, sous groupe 1.gif, etc ....)

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

var menu=new CreerMenu(3," groupe "," sous groupe "," img final ","titre 4","self");

menu.Add(1,"groupe a",""); // avoir une image du groupe a

menu.Add(2,"sous groupe 1",""); // avoir une image sous groupe 1
menu.Add(3,"img a 1","html1.html"); // avoir une image img a 1
menu.Add(3,"img b 1","html2.html"); // avoir une image img b 1
menu.Add(2,"sous groupe 2","");
menu.Add(3,"img a 2","html3.html");
menu.Add(3,"img b 2","html4.html");
menu.Add(1,"groupe b","");
menu.Add(2,"sous groupe 1","");
menu.Add(3,"img b 1","html5.html");
menu.Add(3,"img b 1","html6.html");
menu.Add(2,"sous groupe 2","");
menu.Add(3,"img b 2","html7.html");
menu.Add(3,"img b 2","html8.html");
menu.Add(3,"img b 2","html9.html");
menu.Add(3,"img b 2","html10.html");


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;
   
    /**********************************************************************/
    var img = menu[valeur].txt + ".gif";
    document.getElementById("imag").src  = img;
     document.getElementById("imag").alt  = img;
    /**********************************************************************/
   
    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];
        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>
</HEAD>
<body leftmargin=0 marginwidth=0 bgcolor="#FFFFFF" vlink="#0000A0" link="#0000FF" scroll="no">
<base target="_this">

<div id="vil" style="position:absolute; top:80%; left:45%; z-index:3;">





<!-- TODO : j'ai fai une modif ici aussi ;) -->
<img id="imag" src="dfg.gif" alt="img change selon select">









</div>
// c'est cette image qui doit changer ...

<div id="conteneur" style="position:absolute; top:40%;left:24%;z-index:2;">
<SCRIPT language="JavaScript">
menu.Aff();
</SCRIPT>
</div>
<script>
function change_site() {
var site = document.menu.popup.selectedIndex;
{
window.location.href =
document.menu.popup.options[site].value;
}
}
</script>
</BODY>
</HTML>



Vincent Demay
[ Lien ]

lundi 16 janvier 2006 à 14:29:04 | Re : je vous colle avec cette triple liste deroulante , hein !

frvfrvfrvfrv

Bonjour à toi vincent !

Super les modif sur le script ,
merci infiniment.

pour les images c'est nickel, sauf que pour activer les fichier html ! ca bug , voici le code que donne mon naviguateur dans la barre d'adresse ! [object Object]

au debut le fichier html1.html n'exister pas !
apres l'avoir creer cela ne marche toujours pas !

Merci de me dire ce qui ne va pas !

Et encore merci pour ton aide precieuse.
lundi 16 janvier 2006 à 16:26:11 | Re : je vous colle avec cette triple liste deroulante , hein !

frvfrvfrvfrv

re salut ! vincent!

et si mes images sont dans un repertoire , je fais comment ?
(car je ne souhaite pas avoir mes images sur la racine.)

j'ai essayer de modifier le getelementbyid(imag):

l'original :

/**********************************************************************/
var img = menu[valeur].txt +
".gif";
document.getElementById(
"imag").src = img;
document.getElementById(
"imag").alt = img;
/**********************************************************************/

ma modif :

/**********************************************************************/
var img = menu[valeur].txt +
".gif";
document.getElementById(
"imag").src+'img/vil'= img;
document.getElementById(
"imag").alt = img;
/**********************************************************************/

mais cela marche pas et ca enleve ma liste.

N.B
Je suis aller sur ton site, mais le mailing ne fonctionne pas. !

Cordialement frv (qu'est pas doué !) :)

lundi 16 janvier 2006 à 20:14:02 | Re : je vous colle avec cette triple liste deroulante , hein !

xdoume

Réponse acceptée !
Salut,

Pour le probleme de lien, j'ai pas trop de le temps de regarder ca ce soir mais j'essaierai d'y jeter un coup d'oeuil demain....

sinon pour le repertoire pour les images, tu peux essayer de  faire :

/**********************************************************************/
var img = menu[valeur].txt +
".gif";
document.getElementById(
"imag").src = "images/" + img;
document.getElementById(
"imag").alt = img;
/**********************************************************************/

Cordialement;

Vincent Demay
[ Lien ]

lundi 16 janvier 2006 à 23:29:23 | Re : je vous colle avec cette triple liste deroulante , hein !

frvfrvfrvfrv

bjr vincent !

Un grand merci, d'avoir répondu aussi vite.
hé oui tu a raison , c'est simple comme tout pour le repertoire d'images.

J'aurais dû m'en douter , moi qui a fait qlq programme en basic.
je perd la tete moi ! :)

Je vais essayer cela des ce soir ! et encore merci.............. infiniment. !
Cordialement franck !

1 2

Cette discussion est classée dans : menu, html, var, add, img


Répondre à ce message

Sujets en rapport avec ce message

je sais pas comment vous faite mais j'y arrive pas ! [ par frvfrvfrvfrv ] je veux faire apparaitre une image selon une triple liste deroulante.l'image change selon la selection, et ceci avant d'activer le fichier html attach Collecte de variable puis envoie vers page en PHP [ par DzinVolt_Original ] Bonjour,     Je debute et j'ai un reel probleme pour collecter la valeur d'une variable de mes listes deroulantes. Je m'explique, je desir connaitre Menu dépliant reste déplié [ par jpthali ] Salut à tous, merci pour ce forum "hyper réactif". J'utilise un script pour un menu déroulant qui fonctionne très bien, la page html appelle un fich menu horizontal avec sous menu déroulant vers le haut [ par belleva ] Bonsoir,J'ai un site qui possède un premier menu déroulant vers le bas dans l'entête de mon site.J'aurais aimé pouvoir mettre un second menu horizonta Menu Défilant Vertical ...Problème de récupération de données [ par Romje1 ] Bonjour, J'essaie de faire un menu défilant vertical au click gauche (le menu descends ) ou droite (le menu monte) sans aide de framework, avec un pa Javascript pour gadget windows [ par alcapone29 ] Bonjour tout le monde,Voila j'ai quelques soucis avec un code Javascript pour mon gadget windows, donc je vous donne un peu le topo :- Dans un formula Menu avec cotès arrondis | HTML - CSS | [ par darksam ] [b]Bonsoir,[/b] Comme le titre l'indique, j'aimerais créer un menu avec cotés arrondis ([i]HTML - CSS[/i]). J'ai visualiser beaucoup de sites Web qui intrusion javascript [ par majong ] Bonjour, pour la transformation du bbcode à l'html, que faut-il faire comme test pour éviter des injections de codes. Le code [code=js]u = u.replace(/ probleme validation site [ par locs34 ] bonjour, j'ai récupérer le menu qui suit ici (aucune erreur sur validator), je l'ai ensuite intégrer directement dans ma page index.html cela fonction Comment ajouter un lien sur des images qui défilent? [ par magatha ] Bonjour, J'espère poser ma question dans le bon endroit. J'ai trouvé un script sympa de rotation d'images (mieux qu'un simple ), et je voudrez que


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales