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