Comment charger une image et la bonne ?

Version imprimable

12/11/2015, 02h38
Chtidichi

Comment charger une image et la bonne ?

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 !!!
14/11/2015, 17h18
NoSmoking
Bonjour,
tu peux tirer avantage de l'événement onerror des image si il y a un problème de chargement.
Code:

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

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

Citation:

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

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);

22/11/2015, 16h57
Chtidichi

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 )
23/11/2015, 11h01
NoSmoking
Citation:

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

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

( je l'avais dit, je suis nul )

Il ne faut pas que cela devienne une fatalité !
23/11/2015, 14h36
Chtidichi

Citation:

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

as tu réussi à mettre en oeuvre ?
Code:

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

23/11/2015, 16h37
Chtidichi

Ça je comprends (je date du turbo-pascal moi ! - et c'était un progrès par rapport à l'UCSD !!:weird:)
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 .

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

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

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:

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 .....:calim2: , j'avais donc rêvé un truc comme

Code:

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

25/11/2015, 18h43
NoSmoking

:koi: c'est exactement ce que fait le bout de code que je t’ai fourni !?!
25/11/2015, 20h42
Chtidichi

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 ...
26/11/2015, 18h28
NoSmoking

Citation:

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

Citation:

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 !

Citation:

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 !

Citation:

il m'en faudrait 10 ????

ajoute les à la liste