Jean-Marie

Jean-Marie de Bordeaux utilise des photos au ratio 4/3 de largeur de 732px et de largeur de 549px.
Je suppose qu'il sait ouvrir l'éditeur html par l'icône crayon, à droite de la barre d'outils, qui propose l'affichage "html" et "rédiger".
Pour publier cette page, j'ai préparé mon code sur une feuille d'éditeur de texte (Gedit pour moi) et pas sur une page de traitement de texte genre Word (important !)
J'ai d'abord copié les lignes de mon code en ouvrant l'éditeur html.
J'ai fait descendre la première ligne de mon code de quelques lignes pour pouvoir écrire au dessus.
Je suis repassé en affichage "rédiger" pour écrire mon texte en choisissant la taille et le style de la police.
Je suppose aussi qu'il sait copier les adresses de ses images; dans mon cas, je les héberge sur Goopics et je copie les adresses dans la liste :"lien direct" par un clic sur l'icône verte qui copie directement.
A partir de là, il a tous les éléments pour modifier mon code.
Il lui faut remplacer mes 5 adresses images en bleu dans le code, par les siennes ... et pi c'est tout !

<div style="height: 549px; margin: 50px auto; width: 732px;">
<p class="sv" id="sv1">&nbsp;</p>
<p class="sv" id="sv2">&nbsp;</p>
<p class="sv" id="sv3">&nbsp;</p>
<p class="sv" id="sv4">&nbsp;</p>
<p class="sv" id="sv5">&nbsp;</p>
<img class="aff" id="aff0" src="https://i.goopics.net/mav30g.jpg" />
<img class="aff" id="aff1" src="https://i.goopics.net/14dqey.jpg" />
<img class="aff" id="aff2" src="https://i.goopics.net/jphih1.jpg" />
<img class="aff" id="aff3" src="https://i.goopics.net/2ajf5w.jpg" />
<img class="aff" id="aff4" src="https://i.goopics.net/vcub1b.jpg" />
</div>
<style><!--
.sv{position:absolute; z-index:5; width:183px; height:549px;}
#sv1{transform:translate(0px,0px);}
#sv2{transform:translate(183px,0px);}
#sv3{transform:translate(366px,0px);}
#sv4{transform:translate(549px,0px);}
.aff{position:absolute; z-index:1; width:732px; height:549px; display:none;}
#aff0{display:block;}
#sv2:hover~#aff1,#sv3:hover~#aff2,#sv4:hover~#aff3,#sv5:hover~#aff4{display:block;}
--></style>

Fonctionnement de l'animation: survolez latéralement le montage pour changer l'image de fond par les 4 images, dans cet exemple.