HTML : insérer une image différente selon le support

Résolu/Fermé

Caetera Messages postés 234 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 6 avril 2025 - 10 nov. 2020 à 18:10
Caetera Messages postés 234 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 6 avril 2025 - 12 nov. 2020 à 00:24

Bonjour à toutes et à tous,
Je débute en codage

Pour les besoins d'un site internet j'aimerais insérer une image dans une page,
Je connais le tag <img> cependant j'aimerais que l'image diffère (2 images différentes) selon la version du site consultée (desktop ou mobile)

Est-ce possible ? Savez-vous comment faire ?

A voir également:

HTML : insérer une image différente selon le support
Editeur html - Télécharger - HTML
Espace html ✓ - Forum Webmastering
Espace en html - Astuces et Solutions
Html download - Télécharger - HTML
&Nbsp html ✓ - Forum Webmastering

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025 4 741
10 nov. 2020 à 18:31

Bonjour,

Soit en utilisant du PHP... soit en utilisant du JAVASCRIPT

Dans les deux cas, un simple IF/ELSE en fonction du site consulté te permettra de faire ce que tu veux.

Mais sans savoir comment tu as géré tes "deux" versions de site... nous ne pourrons pas t'en dire plus

Caetera Messages postés 234 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 6 avril 2025 24
10 nov. 2020 à 18:52

Ok, je m'y penche, merci pour la direction indiquée,
J'utilise spacequare mais la plateforme ne me permet de faire ce que je voudrais, alors j'utilise l'option qui m'est laissée, c'est-à-dire, injecter mon propre code

Réponse 2 / 2

Caetera Messages postés 234 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 6 avril 2025 24
11 nov. 2020 à 02:57

Comment je peux savoir comment squarespace gère les 2 versions du site ?

J'ai essayé ce code ci avec IF/ELSE :

<img if(navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 )
         { 
            src="image mobile"
         }
         else {
            src="Image desktop"
         }
>

Mais sans succès, , c'est peut-être trop simpliste ?
Je ne sais pas comment déterminer la condition initiale,
Dans l'idéal j'aimerais que la page détermine si l'utilisateur/trice utilise un mobile,
Si oui : image mobile
Si non : image desktop

jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025 4 741
11 nov. 2020 à 09:00

Alors..... le Javascript.. ça ne se place pas comme ça n'importe comment dans une page....

Il faut les mettre dans des balises <script>

Dans ton cas ça ressemblerait d'avantage à

<img id="toto" src="Image desktop"/>
<script type="text/javascript">
var monimage = document.getElementById('toto');
if( navigator.userAgent.match(/iPhone/i)
   || navigator.userAgent.match(/webOS/i)
   || navigator.userAgent.match(/Android/i)
   || navigator.userAgent.match(/iPad/i)
   || navigator.userAgent.match(/iPod/i)
   || navigator.userAgent.match(/BlackBerry/i)
   || navigator.userAgent.match(/Windows Phone/i)
 ){ 
  monimage.src="image mobile";
} else {
  monimage.src="Image desktop";
}
</script>

Caetera Messages postés 234 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 6 avril 2025 24 > jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025
11 nov. 2020 à 22:02

Merci beaucoup pour ces précisions, je ne connaissais pas cet élément <script>
Tout fonctionne, c'est super
Encore une question, que signifie le /i après l'indication du navigateur dans le userAgent ? J'ai trouvé ce code comme ça ailleurs sans comprendre pourquoi

jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025 4 741 > Caetera Messages postés 234 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 6 avril 2025
11 nov. 2020 à 22:20

https://www.w3schools.com/jsref/jsref_regexp_i.asp

Très bien, merci

Discussions similaires

la balise <br> ou <br />

Balise </br>

Saut de lignes sans <br/>

Espace HTML