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
soit avec ou pas
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>
Je ne vois pas comment je peux rechecher une partie de caractère dans src.phone_
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
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?
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 @media screen and (max-width: 579px) { }
Merci pour vos lumières
Partager