Comment remplacer la source d'une image

**pierrot10** · 10/10/2018, 21h15

Bonjour à tous

J'affiche une image de la sorte:

Code HTML :

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

1
2
3
4
 
<figure>
				<img id="banner" src="http://www.site.ch/manager/templates/dix-lunes/img/banner/25-banner.jpg" class="img-fluid" alt="Contact" title="Contact" />
			</figure>

Ce que j'essaye de faire est lorsque que la largeur de mon navigateur est plus petite que 580px, l'image est remplacée par

Code HTML :

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

1
2
3
4
 
<figure>
				<img id="banner" src="http://www.site.ch/manager/templates/dix-lunes/img/banner/25-phone_banner.jpg" class="img-fluid" alt="Contact" title="Contact" />
			</figure>

soit avec ou pas

phone_

Je ne vois pas comment je peux rechecher une partie de caractère dans src.

Je dois chercher
banner.jpg et le remplacer par phone_banner.jpg, et dans l'autre cas, je dois faire l'inverse

Code JQUERY :

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

1
2
3
4
5
6
7
 
$( window ).resize(function() {
	if($(window).width()) < 580){
	}else{
 
	}
});

L'autre problème que je vois est quand je redimenssionne mon navigateur entre <400 et 580, banner.jpg n'existera plus, donc, il ne faut pas qu'il cherche une chaine de caractère qui a déjà été chagée.

Je ne sais si je m'y prend de la bonne manière. Je pourrais utiliser

Code CSS :

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

1
2
3
 
@media screen and (max-width: 579px) {
}

mais vu que mon image n'est pas afficher avec du CSS et que je ne la mets pas en background, je ne vois pas d'autres moyens que jquery, non?

Merci pour vos lumières

**psychadelic** · 10/10/2018, 21h36

Et pourquoi ne pas tout simplement utiliser les bonnes balises html qui sont prévues pour ce genre de cas ??

Code HTML :

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

1
2
3
4
<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
</picture>