[résolu] Liste déroulante et css

Bonjour,

Je cherche à faire un menu déroulant du style :

<select name="image">
<option value="image1.jpg">Image1</option>
<option value="image2.jpg">Image2</option>
...
<option value="image9.jpg">Image9</option>
</select>

qui me permettrait d'afficher dans la page courante une image, selon le choix fait dans la liste qui apparaitrait donc toujours au même emplacement.

D'une part je voudrais que l'image se charge sans validation, et que l'emplacement soit définit en css...

J'ai cherché mais je n'ai pas trouvé


Merci de votre aide.
Modifié par Pierrefox (27 Apr 2007 - 17:58)

Bonjour,

Rien à voir avec les CSS, tout ceci se fait en Javascript et peut être fait de manière accessible (en proposant un système de validation).

Bonne continuation.
Romain

J'ai oublié de préciser que je voudrais éviter le javascript... et pour définir la zone où va apparaitre l'image il me faut bien faire ça en css, non ?

Et s'il faut valider je prends quand même
Modifié par Pierrefox (27 Apr 2007 - 14:14)

pour l'image certes tu peux la positionner en CSS. c'est pas la seule façon de faire.

par contre si tu veux echapper au javascript alors tu vas devoir accepter un rechargement de ta page et passer par un language serveur type PHP. Mais alors c moins rapide moins fluide au changement.

edit:
soit c dynamique sans validation => javascript
soit il faut une validation.
Modifié par CPascal (27 Apr 2007 - 14:27)

a écrit :
... je voudrais que l'image se charge sans validation ...

Cela nécessite du Javascript.

a écrit :
... et que l'emplacement soit définit en css.

Il suffit d'ajouter un identificateur (attribut id) sur l'élément html où tu souhaites que l'image soit insérer (dans le cadre d'une utilisation avec Javascript).

a écrit :
Et s'il faut valider je prends quand même

A ce moment, là il faut ajouter un bouton submit dans le formulaire où se trouve ta liste déroulante et récupérer la variable correspondante à la nouvelle image ($_GET / $_POST en PHP) puis la placer dans l'attribut src de l'image ...

A noter, les deux solutions peuvent être associées ...
Modifié par yodaswii (27 Apr 2007 - 14:26)

Bon alors pour mon utilisation je préfère utiliser du javascript... bien que je ne sois pas du coup dans la bonne rubrique est-ce que quelqu'un pourrait me dire comment procéder ? (onchange ?)

Pour le css j'arriverais à me débrouiller.

"CPascal" a écrit :
pour l'image certes tu peux la positionner en CSS. c'est pas la seule façon de faire.

Tu propose quoi d'autre comme méthode que le positionnement par CSS, qui me paraissait le plus simple et pratique à mettre en place ?


Merci de votre aide.



Edit : rien à faire je ne trouve rien pour afficher les images en fonction du choix du menu dans la page courante et non dans une nouvelle fenêtre
Modifié par Pierrefox (27 Apr 2007 - 15:03)

a écrit :
est-ce que quelqu'un pourrait me dire comment procéder ? (onchange ?)

Oui, c'est effectivement avec l'événement onchange ; sur ta balise <select> :

<select onchange="document.getElementById('idsurimg').src = this.value">

Explication de ce code : on change l'attribut src de l'élément d'id "idsurimg" (ceci implique qu'il y'ait déjà une image d'afficher sur la page en cours sinon il faut créer l'image avec le DOM etc.).

Pensez à proposer une alternative pour les utilisateurs désactivant Javascript (code à adapter donc ).
Modifié par yodaswii (27 Apr 2007 - 15:12)

Ok je comprends un peu près donc voilà ce que j'ai fais :

<select onchange="document.getElementById('image').src = this.value">
<option selected="defaut"> - Choisir image - </option>
<option value="images/essai.jpg">Image 1</option>
<option value="images/essai2.jpg">Image 2</option>
<option value="images/essai3.jpg">Image 3</option>
</select>

<div id="image">
	<img src="images/essai.jpg" alt="essai" />
</div>

Mais j'ai du oublier un truc car ça ne fonctionne pas

L'id doit être donné directement à la balise img.

L'id "image" devrait être sur la balise img. Sinon si tu veux conserver ça en l'état il faut changer le script de l'événement onchange.

<grilled>Comment <nicolas> m'a grillé mais grave quoi </grilled>
Modifié par yodaswii (27 Apr 2007 - 17:11)

Nickel

Merci bien, je savais bien que l'erreur était pas loin...


Tiens comme je suis dans le rubrique css j'ai un problème un peu compliqué à vous soumettre, je vais essayé d'être le plus clair possible...

Imaginons que j'ai ma zone où apparait les images, mon bloc qui a une taille en hauteur fixe mais dont la largeur varie en fonction de celle du navigateur, donc il se rapprochera du carré si la résolution est petite et du rectangle si elle est grande, jusque là pas de problème.

Ce qui apparaitrait dans cette zone ce serait une carte et la liste de sélections permet de choisir un quartier. Du coup l'idée de définir une zone de la carte pour chaque quartier mais du fait du redimensionnement je ne pourrais pas l'exprimer en tailles réelles comment cela serait-il possible ?

Pour résumer, l'idée est d'avoir un point de centrage (un pour chaque quartier) autour duquel apparaitrait une zone de la carte différente selon la résolution, donc pas de déformation, mais une zone plus grande si la résolution est plus importante et plus petite si elle est plus petite !


A vous expert du CSS


Merci bien.

a écrit :
Tiens comme je suis dans le rubrique css j'ai un problème un peu compliqué à vous soumettre, je vais essayé d'être le plus clair possible...

Imaginons que j'ai ma zone où apparait les images, mon bloc qui a une taille en hauteur fixe mais dont la largeur varie en fonction de celle du navigateur, donc il se rapprochera du carré si la résolution est petite et du rectangle si elle est grande, jusque là pas de problème.

Ce qui apparaitrait dans cette zone ce serait une carte et la liste de sélections permet de choisir un quartier. Du coup l'idée de définir une zone de la carte pour chaque quartier mais du fait du redimensionnement je ne pourrais pas l'exprimer en tailles réelles comment cela serait-il possible ?

Pour résumer, l'idée est d'avoir un point de centrage (un pour chaque quartier) autour duquel apparaitrait une zone de la carte différente selon la résolution, donc pas de déformation, mais une zone plus grande si la résolution est plus importante et plus petite si elle est plus petite !

A vous expert du CSS

Merci bien.

Merci d'ouvrir un nouveau post dans ce cas. Cela sera ainsi profitable à tous (inutile de perdre des sujets intéressants dans d'autres sujets).

a écrit :

Nickel

Merci bien, je savais bien que l'erreur était pas loin...

Si ton problème est résolu merci de l'indiquer dans ton titre de post avec [Résolu]
Modifié par yodaswii (27 Apr 2007 - 17:47)

Pour le Résolu c'est fait, merci de votre aide

Pour le nouveau sujet ça se passe par là, on se suit ?
Modifié par Pierrefox (27 Apr 2007 - 18:01)