Comment charger une image et la bonne ?

**Chtidichi** · 12/11/2015, 02h38

Bonsoir
Vu l'heure je rends les armes :
J'ai une succession d'images (10 par ex), dont le nom peut être image1.jpg ou image2.jpg ou image3.jpg . Seule l'une des 3 existe à chaque fois, et je voudrais afficher la bonne image.
en javacript, avec un test du genre
"si existe(image1) alors afficher image1 sinon si existe(image2) alors afficher image2 sinon afficher image3"
et surtout comment afficher cote à cote les 10 bonnes images .
Merci de me venir en aide, je n'ai que des rudiments de VBA !!!

**NoSmoking** · 14/11/2015, 17h18

Bonjour,
tu peux tirer avantage de l'événement onerror des image si il y a un problème de chargement.

Code :

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

1
2
3
4
5
var oImage = new Image();
oImage.onerror = function(){
  alert('Je n\'existe pas!!');
};
oImage.src= 'ma_super_image.png';

**Chtidichi** · 18/11/2015, 11h30

Bonjour,
Désolé de n'avoir pas lu plus tôt, j'ai été un peu bousculé . Merci pour onerror, que je sais aussi utiliser dans IMG, mais ça ne vaut que pour 2 images possibles, pas trois !
Cordialement

**NoSmoking** · 22/11/2015, 15h35

...mais ça ne vaut que pour 2 images possibles, pas trois !

cela est valable pour autant d'images que tu le souhaites à condition de rappeler la fonction sur l'error avec l'image suivante

Code :

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
var chemin = 'http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/';
var tabImages = ['image_1.gif','image_2.gif','mini_logo_cours_javascript.gif','image_3.gif'];
function chargeImage(ind){
  var oImage = new Image();
  oImage.onerror = function(){
    ind++;
    if( ind < tabImages.length){
      chargeImage( ind);
    }
  };
  oImage.onload = function(){
    var oDest = document.getElementById('conteneur_image');
    oDest.appendChild( oImage);
  };
  oImage.src= chemin + tabImages[ind];
}
chargeImage(0);

**Chtidichi** · 22/11/2015, 16h57

Bonjour,
Merci, je ( crois que je) comprends ce que fait cette fonction que je n'aurais pas su écrire, mais comment l'utiliser ensuite avec la balise IMG ??
( je l'avais dit, je suis nul )

**NoSmoking** · 23/11/2015, 11h01

...mais comment l'utiliser ensuite avec la balise IMG ??

Code :

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

1
2
var oDest = document.getElementById('conteneur_image');
oDest.appendChild( oImage);

( je l'avais dit, je suis nul )

Il ne faut pas que cela devienne une fatalité !

**Chtidichi** · 23/11/2015, 14h36

Envoyé par NoSmoking

Il ne faut pas que cela devienne une fatalité !

Merci, C'est bien pour ça que je demande et que je progresse .... enfin je crois

**NoSmoking** · 23/11/2015, 15h58

as tu réussi à mettre en oeuvre ?

Code :

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

1
2
3
SI réponse == "OUI" ALORS
  Discussion.statut = "Résolu";
FIN SI

**Chtidichi** · 23/11/2015, 16h37

Ça je comprends (je date du turbo-pascal moi ! - et c'était un progrès par rapport à l'UCSD !!

)
Du coup c'est un ... autre monde .. et non je n'ai rien qui tourne, à ma grande honte : tant que ce n'est pas entre 2 balises html prêt à cuire... je rame .

**NoSmoking** · 23/11/2015, 21h01

Voici un exemple intégrant le code du post #4

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
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>onerror/onload sur image</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
</style>
<script>
var chemin = 'http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/';
var tabImages = ['image_1.gif','image_2.gif','mini_logo_cours_javascript.gif','image_3.gif'];
function chargeImage(ind){
  var oImage = new Image();
  oImage.onerror = function(){
    ind++;
    if( ind < tabImages.length){
      chargeImage( ind);
    }
  };
  oImage.onload = function(){
    var oDest = document.getElementById('conteneur_image');
    oDest.appendChild( oImage);
  };
  oImage.src= chemin + tabImages[ind];
}
</script>
</head>
<body>
<div id="main">
  <h1>onerror/onload sur image</h1>
  <button onclick="chargeImage(0)">Charge Image</button>
  <div id="conteneur_image"></div>
</div>
</body>
</html>

seule l'image mini_logo_cours_javascript.gif existe.

**Chtidichi** · 23/11/2015, 21h46

Merci de ta patience .

Je n'étais "pas loin", puisque j'avais compris que la fonction ne pouvait être déclenchée que par un évènement comme le onclick, mais ça ne fonctionne pas avec le onerror de IMG ( c'est toujours plus facile en version qu'en thème)

Je résume ma quête : 10 images à afficher,chacune avec une option possible (et certaine) parmi 3 jamais la même bien sur, sans intervention autre que le lancement de la page. S'il n'y en avait eu que deux j’aurais écrit simplement de 1 à 10 (ou 100)

Code :

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

1
2
3
<img src="11.jpg" onerror="this.onerror=null;this.src='12.jpg'" />
<img src="21.jpg" onerror="this.onerror=null;this.src='22.jpg'" />
<img src="31.jpg" onerror="this.onerror=null;this.src='32.jpg'" />

Mais voilà il y en a plus que 2 .....

, j'avais donc rêvé un truc comme

Code :

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

<img src="11.jpg" onerror="this.onerror=null;this.src='autreimage(12,13)'" />

autreimage donnant l'adresse 12, ou 13 si 12 n'existe pas ....

**NoSmoking** · 25/11/2015, 18h43

c'est exactement ce que fait le bout de code que je t’ai fourni !?!

**Chtidichi** · 25/11/2015, 20h42

Désolé, je dois atteindre mon maxi en ce moment : ce que fait le code c'est afficher l'image existante avec un clic sur un bouton ...... il m'en faudrait 10 ????
ça me plairait si j'arrivais à le greffer sur le onerror de IMG, mais non apparemment ...

**NoSmoking** · 26/11/2015, 18h28

ne pouvait être déclenchée que par un évènement comme le onclick...

tu peux déclencher la fonction quand tu veux, sur le chargement de la page (onload) sur un click et plein d'autres....

Je résume ma quête : 10 images à afficher,chacune avec une option possible (et certaine) parmi 3 jamais la même bien sur, sans intervention autre que le lancement de la page.

pour moi ton besoin réel s’obscurcit !

ce que fait le code c'est afficher l'image existante avec un clic sur un bouton

Non pas exactement, il affiche la première image existante qui est issue d'une liste (le tableau) et pour l'événement voir ci dessus !

il m'en faudrait 10 ????

ajoute les à la liste