Changement de source d'image via javascript

Version imprimable

12/05/2007, 11h52
jultoys

Changement de source d'image via javascript

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 ?
12/05/2007, 12h33
Auteur

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à...
12/05/2007, 13h31
jultoys

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

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

(j'ai changé également l'id du select ;) )

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

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>

12/05/2007, 16h33
jultoys

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