Page 1 sur 1

liste de dialogue qui modifie des images

MessagePublié: 12 Nov 2002 à 17:02
par fabrice
Comment creer un formulaire web avec une dialog list (menu déroulant) et une image?Par exemple, les valeurs de la dialog list sont A, B et C.Quand on choisi B, l'image initiale se change en B.gif.Si on choisi C, l'image est C.gif.Une fois que l'on a choisi son image (à partir du menu déroulant), on peut cliquer sur le bouton Submit. merci de m'aider dans ce petit Rollover.

Re: liste de dialogue qui modifie des images

MessagePublié: 12 Nov 2002 à 19:06
par Sylvain
Tu peux le faire avec un petit peu de javaScript.Tu inseres l'image a afficher par défaut dans ton masque.Dans ses propriétés HTML, tu lui donne un nom (ex: img).Sur l'évenement onClick de ta liste tu appelle une petite fonction que tu mets dans l'en-tête JS (ex: changeImg)Dans ta fonction tu récupéres l'élément sélectionné et change l'url de l'image. (ex: document.forms[0].img.src='./monImage?openImageResource')[%sig%]

Re: liste de dialogue qui modifie des images

MessagePublié: 13 Nov 2002 à 12:09
par fabrice
merci beaucoup, mais est ce que tu peux me donner la petite fonction qui va bien?

Re: liste de dialogue qui modifie des images

MessagePublié: 13 Nov 2002 à 14:55
par Sylvain
En admettant que strSelectedElement contient l'élément que tu sélectionne par exemple : function (strSelectedElement) {     var frm = document.forms[0];     // Teste l'élément sélectionné     switch (strSelectedElement) { case 'element1': frm.img.src='./monImage1?openImageResource' break; case 'element2': frm.img.src='./monImage1?openImageResource' break; case 'element3': frm.img.src='./monImage1?openImageResource' break; } } Tu peux améliorer le systeme en ajoutant des "|" dans les valeur de ta liste. Au lieu de mettre : valeur1 valeur2 valeur3 Tu mets la valeur | le nom de l'image associée: valeur1 | imageToto valeur2 | imageTiti valeur3 | imageTata Du coup lorsque tu lis la valeur sélectionnée, sa te retourne directement l'image qui doit être modifié... tu peux simplifier la fonction de la sorte. function (strSelectedElement) { document.forms[0].img.src='./'+strSelectedElement+'?openImageResource' } [%sig%]

Re: liste de dialogue qui modifie des images

MessagePublié: 13 Nov 2002 à 17:40
par fabrice
je suis désolé, mais je suis débutant sur domino notes, et j'ai encore un probleme.Cette fonction que j'appelle change: function change(strSelectedElement){document.forms[0].img.src='./'+strSelectedElement+'?openImageResource'}je la mets dans le jsHeader de mon formulaire. Dans le onClick de ma dialog list (qui s'appelle liste), j'appelle :change(liste);et quand j'ouvre dans IE Preview, il ne se passe rien.Merci d'avance

Re: liste de dialogue qui modifie des images

MessagePublié: 14 Nov 2002 à 08:27
par Sylvain
Il faut déclencher l'appel de ta fonction sur le onChange de ta liste, l'évenement onChange n'est pas accessible directement dans designer. Mais ce n'est pas un problème, dans les propriétes HTML de ton champ, dans "Autre' du mets : onChange='change(this.options[this.selectedIndex].value)' [%sig%]

Re: liste de dialogue qui modifie des images

MessagePublié: 14 Nov 2002 à 08:46
par fabrice
je ne comprends pas mais ca ne marche toujours pas.

Re: liste de dialogue qui modifie des images

MessagePublié: 14 Nov 2002 à 08:52
par fabrice
en fait, ca marche avec des radio boutons, mais pas avec la dialog list, et c'est ce dont j'ai besoin...

Re: liste de dialogue qui modifie des images

MessagePublié: 14 Nov 2002 à 10:15
par fabrice
En reprenant la première fonction, j'ai l'impression que le switch ou le case 'lien' ne fait rienma dailog list s'appelle liste, elle contient 3 champs : lien1, lien2 et lien3function change3(liste){ var frm = document.forms[0]; // Teste l'élément sélectionné switch (liste){case 'lien1': frm.img.src='/Broadcas.nsf/image1.jpg?openImageResource'break;case 'lien2': frm.img.src='/Broadcas.nsf/image2.jpg?openImageResource'break;case 'lien3': frm.img.src='/Broadcas.nsf/image3.jpg?openImageResource'break;}}Dans le onClick (ou onChange), j'appelle change3(liste)et il ne se passe rien, alors que si j'utilisefunction change2 (liste){document.forms[0].img.src='/Broadcas.nsf/image1?openImageResource'}cette dernière se charge bien. L'utilisation des alias ne marche pas, donc je voudrais utiliser la première fonction qui est plus simple...merci encore.

Re: liste de dialogue qui modifie des images

MessagePublié: 14 Nov 2002 à 14:34
par Sylvain
Tu ne dois faire l'appel de ta fonction comme ceci : change3(liste)Mais en remplaçant liste par la valeur de l'élément sélectionné.change3(this.options[this.selectedIndex].value)[%sig%]

Re: liste de dialogue qui modifie des images

MessagePublié: 14 Nov 2002 à 15:49
par fabrice
merci pour toute l'aide qui m'a permis de finir ce p***n de formulaire à temps.Je viens de comprendre ce qui n'allait pas:les valeurs de la liste étaient les suivante : lien1 lien2 lien3et quand je faisais : alert(this.options[this.selectedIndex].value);cela me retournait une boite vide.en ajoutant lien1|a lien2|b lien3|ccomme par hasard cela me ramene a, b ou c selon le choix.A partir de ce moment, tout s'est illuminé.merci encore de ton aide