Discussion :

[Toogda]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[andry.aime]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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+.

[Toogda]

ok merci bien

[Toogda]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[Invité]

Bonjour,

montre le code HTML généré.

[Toogda]

voici ca:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 ?

[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)

[Invité]

Bonjour,

Sois plus clair.

Comment s'appellent les images ?

[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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Doksuri]

bonjour,
il te faudra un tableau de correspondance.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 !).

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

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

[Toogda]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}