Discussion :

[apdf1]

Bonjour

J'ai un lien vers une image qui est formulé comme ceci

Code :

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

<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Corbonod.png" class="img_ville" width="120" height="150" id="img111" style="display:none;">

mon problème est que lorsque l'image n’existe pas, j'aimerais qu'il affiche un logo à la place du nom de "sans blason" en sachant qu'il y a une image qui se nome "sans blason" dans le même dossier.

Je vous remercie d'avance
Max

[mathieu]

le plus simple pour faire ça est d'utiliser un langage côté serveur comme PHP par exemple. est ce que vous avez cela sur votre hébergement ?

[apdf1]

Bonjour non j'ai pas
Merci

[Doksuri]

sans php, il n'y aurai que le js

Code html :

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

1
2
3
<div>
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Corbonod.png" class="img_ville" width="120" height="150" id="img111" style="display:none;">
</div>

Code javascript :

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

document.getElementById('img111').addEventListener('error', function() { this.parentNode.innerHTML = 'sans blason'; });

[apdf1]

Bonjour Doksuri et merci

Pour le code Js mais j'ai oublié de dire que j'avais plusieurs lignes c'est à dire comme ceci:

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
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/L_Abergement_Clemenciat-01.png" class="img_ville" width="120" height="150" id="img1" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/L_Abergement_De_Varey-01.png" class="img_ville" width="120" height="150" id="img2" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/amberieu_en_bugey-01.png" class="img_ville" width="120" height="150" id="img3" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/amberieux_en_dombes-01.png" class="img_ville" width="120" height="150" id="img4" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambleon-01.png" class="img_ville" width="120" height="150" id="img5" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambronay-01.png" class="img_ville" width="120" height="150" id="img6" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambutrix-01.png" class="img_ville" width="120" height="150" id="img7" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Andert_Et_Condon-01.png" class="img_ville" width="120" height="150" id="img8" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Anglefort-01.png" class="img_ville" width="120" height="150" id="img9" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Apremont-01.png" class="img_ville" width="120" height="150" id="img10" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Aranc-01.png" class="img_ville" width="120" height="150" id="img11" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arandas-01.png" class="img_ville" width="120" height="150" id="img12" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbent-01.png" class="img_ville" width="120" height="150" id="img13" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbignieu-01.png" class="img_ville" width="120" height="150" id="img14" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbigny-01.png" class="img_ville" width="120" height="150" id="img15" style="display:none;">

Sa peu aller jusqu’à 150 lignes ou images
et sur le code que tu me donne j'ai le non d'une image comme sur ton exemple img111

Code javascript :

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

document.getElementById('img111').addEventListener('error', function() { this.parentNode.innerHTML = 'sans blason'; });

Peu tu m'aider
Je te remercie d'avance
Max

[Doksuri]

as-tu essaye d'ajouter l'attribut alt sur tes images ?
developer.mozilla.org/fr/docs/Web/HTML/Element/Img

L'attribut alt n'est pas obligatoire mais recommandé et contient une description textuelle de l'image ; il est recommandé pour des raisons d'accessibilité et sera utilisé par les lecteurs d'écran ou sera affiché si l'image ne peut pas être chargée.

ou alors tu veux vraiment un truc JS ?