Clic et survol

Clic et survol

..

Pour tester ce code, j'ai repris mes photos de Vinsobre du 30 janvier dernier.

Avec l'aide efficace de Stormalo, que d'aucuns connaissent par le forum Ekla, voici un montage où il faut cliquer sur chaque bouton pour afficher l'image correspondante dans le cadre central.
Le survol de cette image centrale l'agrandira en plein cadre.

Rappel: mes adresses en bleu sont redimensionnées en 1152x648px par @1152x648.jpg ajouté à l'adresse récupérée dans l'album Ekla, afin de faciliter le transfert mais ce n'est pas indispensable.
L'adresse que vous récupérerez sera du style:http://ekladata.com/vvxoIDueEXGzcixAW2iSYAXI-Aw.jpg et donc à modifier.

<div style="width: 60vw; height: 33.75vw; border:0.4vh ridge white; background: linear-gradient(to bottom, rgba(100,0,0,0.7) 0%, rgba(0,100,100,0.2) 100%); margin: 2vh auto;"><input id="x1" class="st" type="text" value="A" /><input id="x2" class="st" type="text" value="B" /><input id="x3" class="st" type="text" value="C" /><input id="x4" class="st" type="text" value="D" /><input id="x5" class="st" type="text" value="E" /><input id="x6" class="st" type="text" value="F" /><input id="x7" class="st" type="text" value="G" /><input id="x8" class="st" type="text" value="H" /><input id="x9" class="st" type="text" value="I" /><input id="x10" class="st" type="text" value="J" /><input id="x11" class="st" type="text" value="K" /><input id="x12" class="st" type="text" value="L" />
<p id="par1"> </p>
<p id="par2"> </p>
<p id="par3"> </p>
<p id="par4"> </p>
<p id="par5"> </p>
<p id="par6"> </p>
<p id="par7"> </p>
<p id="par8"> </p>
<p id="par9"> </p>
<p id="par10"> </p>
<p id="par11"> </p>
<p id="par12"> </p>
<p id="par0">Avec l'aide efficace de Stormalo, que d'aucuns connaissent par le forum Ekla, voici un montage où il faut cliquer sur chaque bouton pour afficher l'image correspondante dans le cadre central.<br />Le survol de cette image centrale l'agrandira en plein cadre.</p>
</div>

<style></style>