Afficher une image suivant sélection

Version imprimable

Bonjour,
j'ai un form select, comme ci-dessous, a laquelle je voudrais associer une image à la sélection :

Code:

1
2
3
4
5
6
7
8
<select name="nom_select">
    <option value="1">30jr</option>
    <option value="2">60jr</option>
    <option value="3">90jr</option>
    <option value="3">180jr</option>
</select>
 
<img src="nom_select.png"> // ceci n'est pas correcte c'est juste pour traduire l'idee et rechercher une solution

Bonjour,

Tu changes la valeur de l'attribut src de l'img sur l’événement onchange du select.
Code:

1 2 3 <select name="nom_select" onchange="document.getElementById('id_img').src = 'image_'+this.value+'.png' "> ... <img src="nom_select.png" id="id_img" />
A+.

01/10/2018, 20h57
Toogda

ok merci bien

oups! j'ai essayer le code précédant mais çà ne marche pas encore quelqu'un pourrait m'indiquer ce qui va pas!

voici mon code
Code:

1 2 3 4 5 6 7 <select name="nom_select" onchange="document.getElementById('id_img').src = 'img/productImage/'+this.value+'.png' "> @foreach ($times as $key => $time) <option value="{{$key}}">{{$time}}</option> @endforeach </select> <img src="nom_select.png" id="id_img" />
le code reste tel a l’exécution (ctrl+u)

08/10/2018, 17h30
Invité

Bonjour,

montre le code HTML généré.

voici ca:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div >
                                <select name="nom_select" onchange="document.getElementById('id_img').src = 'img/productImage/'+this.value+'.png' ">
                                                                            <option value="0">7_jours</option>
                                                                            <option value="1">10_jours</option>
                                                                            <option value="2">30 jours</option>
                                                                            <option value="3">60 jours</option>
                                                                            <option value="4">90 jours</option>
                                                                            <option value="5">180 jours</option>
 
                                </select> 
 
                                <img src="nom_select.png" id="id_img" />
 
 
                            </div>

08/10/2018, 18h16
Invité
Avec ce code, il faut que tes images s'appellent :
- img/productImage/0.png
- img/productImage/1.png
- img/productImage/2.png
- ...
C'est bien le cas ?
09/10/2018, 20h18
Toogda

oui, effectivement;

j'avais nommer mes images 7_jours.png ; 10_jours.png; ...

mais ça m’étonne qu'au niveau du code générer il n'y ait pas de changement alors que les images s'affichent quand même.

j'aurai voulut afficher le nom de la photo affichée dans une balise paragraphe: <p> mom_select</p>
et aussi pouvoir concaténer le nom choisit avec une autre valeur pour définir une liste d'image: exemple:

au lieu de retourner img/productImage/0.png quand je sélectionne la première option (7_jours.png);
mais retourner img/productImage/0_autreChose.png (_autreChose étant une variable php)
09/10/2018, 20h24
Invité

Bonjour,

Sois plus clair.

Comment s'appellent les images ?
09/10/2018, 20h58
Toogda
les images s'appellent:

1_10.png
2_10.png
3_10.png
1_30.png
2_30.png
3_30.png

mon_select fouine la 2ieme partie du nom (_10.png):
Code:

1 2 3 4 <select> <option value="_10">...</option> <option value="_30">...</option> </select>
a ce niveau, quant je choisie l'option 1, j'ai l'image _10.png;

j'ai déclarer un tableau (php pour pouvoir afficher tous les images terminant par _10.png, au choix de l'option 1)
ainsi avec un foreach je veut obtenir les images :1_10.png - 2_10.png - 3_10.png

c'est a peu prés cela que je veut implémenter

bonjour,
il te faudra un tableau de correspondance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div>
    <select name="nom_select" onchange="loadImg(this.value);">
        <option value="0">7_jours</option>
        <option value="1">10_jours</option>
        <option value="2">30 jours</option>
        <option value="3">60 jours</option>
        <option value="4">90 jours</option>
        <option value="5">180 jours</option>
    </select>
    <img src="nom_select.png" id="id_img" />
</div>
<script type="text/javascript">
function loadImg(key) {
    var arr = [
        '1_10',
        '2_10',
        '3_10',
        '1_30',
        '2_30',
        '3_30',
        //.....
    ];
    document.getElementById('id_img').src = 'img/productImage/' + arr[key] + '.png';
}
</script>

10/10/2018, 10h12
Invité

Bonjour,

@Toogda,
ce que tu racontes ne correspond pas au code de ton message #6, ni à celui du message #1.
Ce n'est pas cohérent.

Si tu veux de l'aide, donne-nous les bonnes infos (et les bons codes !).

Citation:

Envoyé par Toogda

...c'est a peu prés cela que je veut implémenter

Quand tu sauras VRAIMENT, fais-nous signe... :roll:

1 pièce(s) jointe(s)

Salut à nouveau, je reviens sur mon problème fin d’être beaucoup plus explicite : je dispose d’une carte ayant des points de grid (les points de grid sont numérotés 1, 2,3,…,n ). A chaque point de grid et dépendant de la valeur du combo correspond un lien d’image
Valeur du combo : 30, 60, 90.
Exemple si le selected est 30 alors on a
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <map name="africa_point_grille"> <area href="img/productImage/1_30.png" shape="circle" coords="52, 455, 10" alt="Station Location Marker"> // point de grid 1 <area href="img/productImage/2_30.png" shape="circle" coords="52, 460, 10" alt="Station Location Marker"> // point de grid 1 ... <area href="img/productImage/n_30.png" shape="circle" coords="52, 465, 10" alt="Station Location Marker"> // point de grid n </map> <a> <center> <IMG SRC="img/productImage/africa_point_grille.png" ALT="Clickable Image" USEMAP="#africa_point_grille" ISMAP="ismap"> </center> </a>
si le selected est 60 alors on aura
Code:

1 2 3 ... <area href="img/productImage/1_60.png" shape="circle" coords="52, 455, 10" alt="Station Location Marker"> // point de grid 1 ...
jai une variable php qui fourni de ja les les valeur du combo ($tab = ['30', '60', '90']; )

le lien des images devra donc être actualise a chaque changement du combo.
voici l'image grid
Pièce jointe 425163

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    <select name="num_grid" id="id_grid">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select name="num_combo" id="id_combo">
        <option value="30">30</option>
        <option value="60">60</option>
        <option value="90">90</option>
    </select>
    <img src="" id="id_img" />
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var div_grid = document.querySelector('#id_grid');
var div_combo = document.querySelector('#id_combo');
 
div_grid.addEventListener('change', function(){
	loadImg();
});
div_combo.addEventListener('change', function(){
	loadImg();
});
function loadImg(grid, combo) {
    num_grid = div_grid.value;
    num_combo = div_combo.value;
    document.getElementById('id_img').src = 'img/productImage/' + num_grid + '_' + num_combo + '.png';
}