Select image en javascript

Version imprimable

07/03/2014, 17h13
daly1589

Select image en javascript

Bonjour tout le monde,

Je suis débutante en javascript ...je voudrais réaliser un select qui affiche des image comme dans ce tuto

http://www.flowsim.se/picts/iljjava/eiljsele.html

Le problème c'est qu'en suivant ce qu ils recommandent rien ne s'affiche...je remplace le mot iljblid par une photo, exemple : http://upload.wikimedia.org/wikipedi...Stonehenge.jpg j'enleve le JPG...pour le mettre après comme il demande mais rien n'y fait !!!!
08/03/2014, 15h57
NoSmoking

Bonjour et bienvenue sur DVP.
La meilleur des choses que tu puisses faire c'est de nous mettre le code que tu as réalisé/modifié.

voici mon code:

Code:

1
2
3
4
5
6
 <select id="changeImage">
  <option value="0">image 0</option>
  <option value="1">image 1</option>
  <option value="2">image 2</option>
</select>
<img id="image" src='//C:Users/FRAME/Desktop/pic/1.jpg'>

Code:

1
2
3
4
5
6
7
8
9
var imagesArray = [
  "//C:Users/FRAME/Desktop/pic/1.jpg"
   "//C:Users/FRAME/Desktop/pic/2.jpg"
  "//C:Users/FRAME/Desktop/pic/2.jpg" 
];
 
$('#changeImage').change(function(){
  $('#image')[0].src = imagesArray[this.value];
})

Mes photos ne s'affichent pas!
j'ai essaye ca aussi! qui marche sur le simulateur w3schools mais pas mes navigateur...

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
<!doctype html>
 
<html lang="fr">
  <head>
 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 
  <select id="changeImage">
    <option>cf5</option>
    <option>f1f</option>
    <option>444</option>
  </select>
  <img id="image" src='//placehold.it/50x50/cf5'>
 
	<script type="text/javascript">
        $('#changeImage').change(function(){
  $('#image')[0].src = "//placehold.it/50x50/"+this.value;
});
    </script>
 
  </body>
</html>

13/03/2014, 12h58
blinkman04

Petite question bête, quand tu inspecte t'a page à l'aide de ton navigateur. Pas d'erreur comme quoi les chemins de tes images sont incorrecte ? Première chose à vérifier pour moi ^^:mouarf:
13/03/2014, 15h08
SpaceFrog

un src d'image ne connait pas le type de path que tu essayes de lui fournir ...

regarde du coté du protocole file://
13/03/2014, 19h10
NoSmoking
Si on reprend ton SELECT
Code:

1 2 3 4 5 <select id="changeImage"> <option>cf5</option> <option>f1f</option> <option>444</option> </select>
on s’aperçoit que tes OPTIONs n'ont pas de value, donc comment veux tu récupérer la value du SELECT, même si dans l'absolue jQuery te sauve si tu utilises $(this).val().

Tu devrais réorganiser tes répertoires afin de ne pas avoir des paths contenant des //C:Users/FRAME par exemple.
14/03/2014, 10h11
SpaceFrog

Nosmo => c'est pssoble à partir du text ou du selected index car les paths sont dans un array ...

Mais il est clair que ce serait plus simple avec un value ..