Menu déroulant modifiant un cadre iframe

Bonjour à tous,

J'ai besoin de votre aide pour le développement de mon site...

Pour des raisons esthétiques j'ai besoin d'utiliser un 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:

<a href="FL01.htm" target="center">animal 01</a>
<a href="FL02.htm" target="center">animal 02</a>
<a href="FL03.htm" target="center">animal 03</a>

Malheureusement cela ne marche pas quand j'essaye de l'intégrer dans un menu déroulant. Je pense que j'ai besoin d'utiliser javascript pour cela (si vous avez d'autres idées, elles sont les bienvenues...)

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

Une précision sur la photo ci jointe:

-A gauche j'aimerais insérer un menu déroulant afin que la liste d'animaux prenne moins de place. A droite le cadre Iframe où apparait l'animal choisi...

Merci!!

Tony

Salut,

En fait ce n'est pas onChange, mais onClick : en cliquant sur le lien.
Au final c'est très simple, quelque lignes seulement.

1. Mettre un onClick sur les liens qui vont appeler une fonction (ex : "return changeAnimal(this);").
2. Recuperer le href du lien et l'inséré dans ton iframe.
3. Envoyer false sinon le navigateur suit le lien.

function changeAnimal(a){
    document.getElementById("id_de_la_frame").setAttribute("href", a.getAttribute("href"));
    return false;
}

Après tu pourrais faire la même chose pour un bouton et ainsi avoir un élément img au lieu d'un frame.

Pour le menu déroulant doit y avoir plein de source sur internet (ou un framworks).
En attendant je vais manger ^^.

Bonjour Jo,

Mille mercis pour ton aide..

Je sens que l'on est proche de la solution..

Il faut savoir qu'il y a un tableau en 2 parties:

-à gauche le menu déroulant avec le choix des animaux
-à droite le frame à modifier (name= center)

J'ai du faire un erreur, cela n'a pas marché. Je te mets le code ci dessous:

-Dans la partie script, voici le code que j'ai mis:

<script language="JavaScript">
function ChangeAnimal(a){
document.getElementById("center").setAttribute("href", a.getAttribute("href"));
return false;
}
</script>

-Dans le corps voici ce que j'ai mis:

<tr>
<td height="30px" width="160px">
<select name="menu1" class="Change" onClick="ChangeAnimal(this)">
<option class="style13">Cliquez ici</option>
<option value="FA003.htm" class="style13">Animal01</option>
<option value="FA004.htm" class="style13">Animal02</option>
<option value="FA005.htm" class="style13">Animal03</option>
</select>
</td> </tr>

J'espère que cela est suffisament clair...

Encore merci pour ton soutien, car en effet il y a plein de sources pour des menus déroulants mais la plupart modifient des images, ou envoient vers une autre page, mais aucune qui modifie un frame...

Thanks,

Tony

Hello switchup et bienvenue sur le forum ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Oups désolé modérateur, voici le code ci dessous selon les instructions...

[code=javascript]
<script language="JavaScript">
function ChangeAnimal(a){
document.getElementById("center").setAttribute("href", a.getAttribute("href"));
return false;
}
</script>

-Dans le corps voici ce que j'ai mis:

[code=javascript]
<tr>
<td height="30px" width="160px">
<select name="menu1" class="Change" onClick="ChangeAnimal(this)">
<option class="style13">Cliquez ici</option>
<option value="FA003.htm" class="style13">Animal01</option>
<option value="FA004.htm" class="style13">Animal02</option>
<option value="FA005.htm" class="style13">Animal03</option>
</select>
</td> </tr>

C'est en effet plus lisible!

Thanks,

Tony