• Onglets texte

    Dans le code, le premier bouton ne dirige rien et, par défaut, revient sur la première page.

    le contenu de la première page.
    Dans ces pages, vous placez ce que vous voulez: texte, image, iframe, liens.

    Cette vidéo vous permet de regarder l'image à 360° en déplaçant votre souris de droite à gauche et de haut en bas.

    le contenu de la seconde page.

    Amusant, non ?

    Une image fixe.

    Le code de principe
    <div style="width: 1000px; height: 600px; margin: 0px auto;"><input id="og1" class="aa" type="text" value="page 1" /><input id="og2" class="aa" type="text" value="page 2" /><input id="og3" class="aa" type="text" value="page 3" /><input id="og4" class="aa" type="text" value="page 4" />
    <p id="pg1">le contenu de la première page.</p>
    <p id="pg2">le contenu de la seconde page.</p>
    </div>
    <style><!--
    .aa{position:absolute; width:80px; height:26px; background: linear-gradient(to top, #fac695 0%,#f5ab66 47%,#ef8d31 100%); text-align:center; border:none; font-size:14px; border:1px solid black; border-radius:15px 15px 0 0;}
    #og1{transform:translate(0px,0px);}
    #og2{transform:translate(100px,0px);}
    #pg1{position:absolute; z-index:2; width:1000px; height:570px; border:1px solid black; padding:5px; box-sizing:border-box; transform:translate(0px,30px); background: linear-gradient(to top, #b0d4e3 0%,#88bacf 100%); text-align:center; font-size:15px;}
    #pg2{position:absolute; z-index:1; width:1000px; height:570px; border:1px solid black; padding:5px; box-sizing:border-box; transform:translate(0px,30px); background: linear-gradient(to top, #e4efc0 0%,#abbd73 100%); text-align:center; font-size:15px;}
     #og2:focus ~ #pg2, #og3:focus ~ #pg3, #og4:focus ~ #pg4{z-index:5;}
    --></style>

    Ici, 4 boutons mais je n'ai laissé que 2 pages pour simplifier; il suffit d'ajouter des lignes input et de les positionner en CSS.
    Vous remarquerez l'action des boutons au focus, rassemblée en une ligne pour les 4 (ou +) boutons: la page sélectionnée passe en premier plan (z-index:5;).

    le code complet:
    <div style="width: 1000px; height: 600px; margin: 0px auto;"><input id="og1" class="aa" type="text" value="page 1" /><input id="og2" class="aa" type="text" value="page 2" /><input id="og3" class="aa" type="text" value="page 3" /><input id="og4" class="aa" type="text" value="page 4" />
    <p id="pg1">le contenu de la premi&egrave;re page.<br />Dans ces pages, vous placez ce que vous voulez: texte, image, iframe, liens.<br /><iframe src="https://www.youtube.com/embed/MD8U6QV7Pb8" frameborder="0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe><br />Cette vid&eacute;o vous permet de regarder l'image &agrave; 360&deg; en d&eacute;pla&ccedil;ant votre souris de droite &agrave; gauche et de haut en bas.</p>
    <p id="pg2">le contenu de la seconde page.<br /><img src="http://ekladata.com/o5k7lP2NhRCJZbbbCIet0eelExw.gif" alt="" /><br />Amusant, non ?<br /><img src="http://ekladata.com/tWE2J_AcIGWnv-SOgF-MUMYkDTk.gif" alt="" /></p>
    <p id="pg3">Une image fixe.<br /><img style="width: 550px; height: 500px;" src="http://rigolotes.fr/img/normal/20170303/KCC/20170303.jpg" alt="" /></p>
    <p id="pg4">Le code de principe<br />...</p>
    </div>
    <style><!--
    .aa{position:absolute; width:80px; height:26px; background: linear-gradient(to top, #fac695 0%,#f5ab66 47%,#ef8d31 100%); text-align:center; border:none; font-size:14px; border:1px solid black; border-radius:15px 15px 0 0; box-shadow:inset 1px 1px 2px black;}
    #og1{transform:translate(0px,0px);}
    #og2{transform:translate(100px,0px);}
    #og3{transform:translate(200px,0px);}
    #og4{transform:translate(300px,0px);}
    #pg1{position:absolute; z-index:2; width:1000px; height:570px; border:1px solid black; padding:5px; box-sizing:border-box; transform:translate(0px,30px); background: linear-gradient(to top, #b0d4e3 0%,#88bacf 100%); text-align:center; font-size:15px;}
    #pg2{position:absolute; z-index:1; width:1000px; height:570px; border:1px solid black; padding:5px; box-sizing:border-box; transform:translate(0px,30px); background: linear-gradient(to top, #e4efc0 0%,#abbd73 100%); text-align:center; font-size:15px;}
    #pg3{position:absolute; z-index:1; width:1000px; height:570px; border:1px solid black; padding:5px; box-sizing:border-box; transform:translate(0px,30px); background: linear-gradient(to top, #ffc578 0%,#fb9d23 100%); text-align:center; font-size:15px;}
    #pg4{position:absolute; z-index:1; width:1000px; height:570px; border:1px solid black; padding:5px; box-sizing:border-box; transform:translate(0px,30px); background: linear-gradient(to top, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); text-align:center; font-size:15px;}
    #og2:focus ~ #pg2, #og3:focus ~ #pg3, #og4:focus ~ #pg4{z-index:5;}
    --></style>