Menu déroulant modifiant un iframe

Question

Bonjour à tous,

J'ai besoin de votre aide pour le développement de mon site...

Pour des raisons esthétiques j'utilise un bouton menu déroulant avec 10 options, chacunes permettant le choix d'un animal.

Quand le choix est fait, je voudrais que la fonction onChange modifie mon iframe a côté (name="center") par une autre page (exemple: FL01.htm ou FL02.htm , etc...)

Cela marche quand je l'utilise dans une liste comme ceci:

[FL01.htm animal 01]
[FL02.htm animal 02]
[FL03.htm animal 03]

J'ai juste besoin que cette liste soit intégrée dans un menu déroulant.

Je suis obligé d'utliser un iframe car je dois insérer un bouton d'achat pour chaque référence, je ne suis pas assez calé pour faire autrement...

Merci à tous pour votre aide..

Tony

Bul3 · Answer

Bonjour,
>>je ne suis pas assez calé pour faire autrement... 
c'est un choix, 
rien à dire
nul ne conteste, et celui qui
critiquerait ferait sans doute bien pire

>>J'ai juste besoin que cette liste soit intégrée 
>>dans un menu déroulant. 
et, c'est quoi votre menu déroulant ?
un select ? dans ce cas, remplacer le par un div avec
 style="overflow:auto;height:40px;..."

Cordialement	[mon Site]	[M'écrire]	Bul

barcelonetony · Answer

Merci Bul3, mais vos explications ne sont pas assez claires pour moi.

Suis un novice en html, bien que j'en fais depuis 5 ans...

C'est très simple, j'ai un bouton qui permet en cliquant dessus de dérouler une liste de propositions, 10 en tout.

Je pensais utiliser <select> . 

Il faut que le choix effectué modifie l'iframe name="center" avec une adresse différente: FL01.htm, Fl02.htm, etc...

Je ne peux pas utiliser un 
 car je n'ai pas assez de places en dessous, d'où l'idée d'utiliser un menu déroulant...

Bul3 · Answer

et... je vous disais d'utiliser 
un div plutôt qu'un select
on peut fazire avec un select, mais ça oblige
le javascript, avec un div : html uniquement !



[FL01.htm animal 01]

[FL02.htm animal 02]

[FL03.htm animal 03]

[FL04.htm animal 04]

....




vous adapterez le style= à ce que vous
voulez comme présentation

barcelonetony · Answer

Bonsoir,

J'ai essayé cette méthose mais cela ne donne rien, en plus cela ne permet pas d'avoir un menu déroulant, mais une liste de bas en haut, ce que je ne veux pas du tout... je souhaite un menu déroulant qui s'affiche.

Je pense que je dois ajouter quelques précisions:

J'ai un tableau avec 2 colonnes, une avec le choix des animaux et l'autre avec la photo et un bouton d'achat

Je suis obligé d'avoir la partie où se situe la photo en iframe qui doit être modifié à chaque fois que la personne clique sur le nom d'un animal (FL01.htm, FL02.htm, etc...).

Pour des raisons de taille de tableau (il y a 80 references de photos) je dois avoir cette liste qui s'affiche avec un bouton qui lorsque l'on clique, se déroule la liste des choix de photos (=menu déroulant)

Quelqu'un s'y connait-il en menu déroulant svp????

Par avance merci,

Tony

Bul3 · Answer

>>'ai essayé cette méthose mais cela ne donne rien, 
probablement que vous n'avez pas essayé tel quel
>>en plus cela ne permet pas d'avoir un menu déroulant, 
>>mais une liste de bas en haut, 
si vous essayez tel quel mon exemple,
ça ressemble assez à un select
>>je souhaite un menu déroulant qui s'affiche. 
et le menu déroulant c'est quelle balise ???

Bul3 · Answer

essayez donc ici et dites-moi

barcelonetony · Answer

Bonjour Bul3,

Merci pour cet exemple, c'est un peu plus clair avec le lien donné. Il faut que j'essaye dans un tableau pour voir si cela fonctionne au sein d'un tableau...

Par contre j'ai ouvert le lien sur un pc et sur un mac, et sur ce dernier cela ne marche pas.

J'ai besoin d'un code qui marche dans les 2 cas...

Je vais continuer à creuser... je vous tiens au courant...

Tony

Bul3 · Answer

ah... mac : connait trop peu pour dire.
comme c'est du pur html+css... disons : curieux
la compatibilité serait encore plus 
difficile avec du javascript je pense.

pour ressembler "mieux" au select :
jouer, en css, avec le heigth dans le_div:hover

si vous tenez à tout prix à mettre un select
et du javascript :
évènement onchange du select appelle une fonction (**)
le_select.selectedIndex c'est l'index de
l'option choisie
vous mettez l'url dans le .value des option
le_select.options[n° de ligne].value pour l'obtenir
et pour charger dans  un iframe : modifier son .src

(**) attention si le select n'a pas de size ou si
size="1", l'option 0 est sélectionnée par défaut
pour déclencher le onchange, il faudrait
cliquer sur une autre option....
donc mettez un size au moins="2", ou mettez
un "titre" dans le 1ère option et tester si
ce n'est pas celle là qui est actionnée, ou
au focus, mettez selectedIndex=-1, ou ....

Menu déroulant modifiant un iframe

8 réponses

Votre réponse

Discussions similaires