Afficher une image différente desktop -> mobile

**JBKHBENT** · 13/01/2020, 16h14

Bonjour à tous,

Débutant dans le code, j'ai lancé mon site (prestashop) et j'essaye de me débrouiller pour coder mes pages mais là je bloque sur une petite problématique.

J'ai une page version desktop qui me convient parfaitement et je souhaiterais simplement remplacer deux images sur la version mobile de cette même page.

J'ai essayé avec différentes balises mais je ne parviens pas à un résultat correct.
Voici la ligne de code basique de l'image avec la taille pour le desktop.

Code :

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

1
2
3
<html>
<h2 style="text-align: center;"><img src="urlimage" alt="" width="2400" height="800" /></h2>
</html>

Est-ce que vous pourriez m'aider sur la balise à utiliser ?

Désolé si il manque des informations, je débute tout juste.

Merci beaucoup et je vous souhaite une bonne journée,

**NoSmoking** · 13/01/2020, 16h49

Bonjour et bienvenue sur DVP.

L'élément <picture> devrait répondre à ce que tu cherches à faire.

Ressource :

↪ <picture> : l'élément d'image adaptative (sur MDN)

**JBKHBENT** · 13/01/2020, 17h43

Bonjour et merci pour la réponse rapide !

J'ai essayé de l'insérer mais cela ne change pas l'image sur mobile, elle reste identique :/

Voilà en gros avec quoi je me retrouve :

Code :

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

1
2
<h2 style="text-align: center;"><img src="lienimage" alt="" width="2400" height="800" /></h2>
<p><picture> <source srcset="lienimage" media="(min-width: 800px)" /> <img src="lienimage" /> </picture></p>

Il faut que je précise une spécificité de taille ?

**NoSmoking** · 14/01/2020, 09h10

Essaies simplement ce bout de code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[HTML] Elément picture</title>
</head>
<body>
<picture>
  <source srcset="https://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_cours_xhtml.gif"
          media="(max-width: 800px)">
  <!--
      c'est l'image ci-dessous qui s'affichera sur des écrans de taille supérieure à 800 px
      ou si l'élément <picture> n'est pas reconnu par le navigateur
   -->        
  <img src="https://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_livres_xhtml_old.gif" alt="">
</picture>
</body>
</html>

pour voir ce qui se passe.

**JBKHBENT** · 17/01/2020, 18h50

Hello @NoSmoking,

Merci beaucoup pour la réponse,

Alors je viens d'essayer avec ton exemple cela fonctionne bien mais quand je veux essayer avec mes photos cela ne fonctionne pas.. Est-ce que cela vient d'un problème de taille ? Il faut que je les redimensionne d'une taille particulière pour qu'elle soit bien reconnue ?

En gros mon code donne ça

Code :

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

1
2
3
4
<p>[HTML] Elément picture<picture> <source srcset="https://www.juje.fr/img/cms/Club Mobile.png" media="(max-width: 800px)" /> <!--
      c'est l'image ci-dessous qui s'affichera sur des écrans de taille supérieure à 800 px
      ou si l'élément <picture> n'est pas reconnu par le navigateur
   --> <img src="https://www.juje.fr/img/cms/Bandeau club JUJE Good.png" alt="" /> </picture></p>

Merci beaucoup pour ta réponse,