Changement de source d'image via javascript

**jultoys** · 12/05/2007, 11h52

Salut,

j'ai un soucis avec un petit script, je vous montre et je vous explique :

function numeroImage()
{
var numero = document.getElementById('id').value;
document.getElementById('image').value=numero;
document.getElementById('imagePreview').src="../thumbnails/Thumb"+numero+".jpg";
}

En fait j'ai un menu d�roulant (id) avec une liste de num�ro et quand on selectionne un num�ro dans la liste, le champ (image) prend automatiquement la valeur de (id) et l'image (imagePreview) change...

Ce script fonctionne tr�s bien sous FireFox mais bien entendu pas sous Internet Explorer...

Comme je suis d�butant en javascript, je ne sais pas trop d'ou peut venir le probl�me et par cons�quent, ne sais pas comment le r�soudre...

Pouvez-vous m'aider SVP ?

**Auteur** · 12/05/2007, 12h33

bonjour,

Donner � un �lement un id dont la valeur est id n'est pas tr�s judicieux

id est un mot-clef javascript.

Ton script � l'air juste, montre nous ton code HTML, cela peut venir �galement de l�...

**jultoys** · 12/05/2007, 13h31

Le select :

...

<select name="id" id="id" onChange="numeroImage()">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
...
</select>

...

L'image :

<div id="preview">
<img src="../thumbnails/Thumb001.jpg" id="imagePreview">
</div>

En fait sous IE quand je test, il ne m'afiche pas l'image mais juste le petit carr� avec la croix rouge et quand je fais un clic droit > propri�t�, au niveau de l'url de l'image ca donne :

thumbnails/Thumb.jpg

Il manque juste le num�ro...

**Auteur** · 12/05/2007, 15h51

tu n'as pas d�fini les value de ta liste !

(j'ai chang� �galement l'id du select

)

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
26
27
28
29
30
31
32
33
34
35
36
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function numeroImage()
{
  var numero = document.getElementById('idSelect').value;
  document.getElementById('image').value=numero;
  document.getElementById('imagePreview').src="../thumbnails/Thumb"+numero+".jpg";
}
 
//-->
</script>
 
</head>
 
<body>
 
<select id="idSelect" onchange="numeroImage()">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
 
<div id="preview">
<img src="../thumbnails/Thumb001.jpg" id="imagePreview">
</div>
 
 
</body>
 
</html>

Sache aussi que tu peux faire comme ceci (transmettre la valeur du champ s�lectionn� en tant que param�tre de la fonction) :

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
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<title></title>

<script type="text/javascript">
<!--
function numeroImage(numero)
{
  //var numero = document.getElementById('idSelect').value;

  document.getElementById('image').value=numero;
  document.getElementById('imagePreview').src="../thumbnails/Thumb"+numero+".jpg";
}

//-->
</script>

</head>

<body>

<select id="idSelect" onchange="numeroImage(this.value)">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<div id="preview">
<img src="../thumbnails/Thumb001.jpg" id="imagePreview">
</div>


</body>

</html>

**jultoys** · 12/05/2007, 16h33

Impeccable, ca fonctionne

En fait j'avais pas mis de value=" ... " car je cr�e les �l�ments de cette liste via php et j'ai un peu de mal avec la concat�nation mais la j'y suis arriv� et ca marche sur FF et IE.

Merci beaucoup pour ton aide

Changement de source d'image via javascript

JavaScript

Discussions similaires

Partager

Partager