Explication1

Quelques montages proposés ayant suscité de l'intérêt à des aimables visiteurs, je voudrais vous parler de la construction d'un tel montage, comme Michal l'a fait pour nous, au début des blogs Orange, alors que nous n'y connaissions rien (et pas beaucoup plus maintenant, d'ailleurs !)

Le montage proposé est un cadre de 1200px par 675px, dimensions maximum acceptées par les blogs blogspot (blogger), après modification du css du blog.

L'objectif est de placer un bouton (input) dans le cadre qui commandera, au clic, l'affichage de plusieurs images (ou textes) qui sont placées en dehors du cadre affiché.

Pour qu'un cadre n'affiche pas ce qui est en dehors, il faut que sa position (relative ou absolute) soit définie et lui écrire, comme attribut: overflow:hidden; (cacher ce qui en dépasse).

Voici un code exemple que vous modifierez selon vos choix:

<div style="position:relative; overflow:hidden; width:1200px; height:675px; margin:50px auto; text-align:left; border:6px ridge grey;">
<input id="mvt1" type="text" value="CLIC">
</div>
<style><!--
#mvt1{position:absolute; z-index:1; width:80px; height:40px; border:none; border-radius:10px; background:lime; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; text-align:center; font-size:20pt; line-height:40px; transform:translate(560px,50px);}
--></style>

qui affiche, en le saisissant dans l'éditeur html/css:

Ajoutons un cadre qui apparaitra au clic sur le bouton.

<div style="position:relative; overflow:hidden; width:1200px; height:675px; margin:50px auto; text-align:left; border:6px ridge grey;">
<input id="mvt1a" type="text" value="CLIC">
<p id="zone1a"><span id="text1">Le texte ou les images qui vont apparaître au clic sur le bouton, animables au survol.</span></p>
</div>
<style><!--
#mvt1a{position:absolute; z-index:1; width:80px; height:40px; border:none; border-radius:10px; background:lime; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; text-align:center; font-size:20pt; line-height:40px; transform:translate(560px,50px);}
#zone1a{position:absolute; z-index:1; width:1200px; height:675px; margin-top:0px; background:#FFE4C4; text-align:center; transform:translate(0px,-700px); transition:all 1s;}
#text1{font-size:25px; color:red; transform:translate(150px,100px);}
#text1:hover{font-size:30px; color:green; text-shadow:1px 1px black;}
#mvt1a:focus ~ #zone1a{transform:translate(0px,0px);}
--></style>

 

Le texte ou les images qui vont apparaître au clic sur le bouton, qui peuvent s'animer au survol.

margin-top:0px; est une spécificité de Blogger qui laisse une écart d'environ 15px en haut des images ou textes et qu'il faut annuler.

Voilà pour le principe de base; à vous de décorer et ajouter vos textes ou images.

Vous pouvez placer plusieurs boutons pour faire apparaître plusieurs cadres différents.