• Diaporama 23 variante

    Pour vérifier que le code que j'ai indiqué est bien exploitable, je viens de créer un bouton et 4 images en 800x600px, en proposant une variante.

    Menu

    Code:

    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a>
    <p id="mn">Menu</p>
    <p id="mb"><a href="#lien1"><img id="tr1" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien2"><img id="tr2" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien3"><img id="tr3" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien4"><img id="tr4" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a></p>
    <p id="img1"><img src="http://ekladata.com/DUD_qYmGoygJn4LFNrwqRglT_bU/DSCN6176.jpg" alt="" /></p>
    <p id="img2"><img src="http://ekladata.com/fkdmvdqbl__iC2PvP3uuaSTvQko/DSCN6178.jpg" alt="" /></p>
    <p id="img3"><img src="http://ekladata.com/0rm9gC6Ix623z_i9qVy_OZyudek/DSCN6179.jpg" alt="" /></p>
    <p id="img4"><img src="http://ekladata.com/0ugm3PdVJr3h5P0bolY10JaTjJU/DSCN6181.jpg" alt="" /></p>
    </div>
    </div>

    <style type="text/css"><!--
    #mont{position:relative; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 6px black; margin:10px auto; overflow:hidden;}
    #ancres a.ancre{display: none;}
    #mn{position:absolute;transition:all 1s linear; z-index:10; width:60px; height:30px; text-align:center; font-size:14pt; color:white; text-shadow:1px 1px black; transform:translate(740px,0px); background-color:rgba(128,128,128,0.5);}
    #mb{position:absolute; transition:all 1s linear; width:230px; height:35px; border:1px solid black; background-color:rgba(128,128,128,0.5); transform:translate(805px,0px);}

    #tr1{position:absolute;z-index:10; transform:translate(20px,0px);}
    #img1{width:800px;height:600px;position:absolute;transform:translate(0px,0px);}
    #tr2{position:absolute;z-index:10;transform:translate(60px,0px);}
    #img2{position:absolute;z-index:2; width:800px; height:600px; transform:translate(800px,0px);transition: all 1s ease; opacity:0;}
    #tr3{position:absolute;z-index:10;transform:translate(100px,0px);}
    #img3{position:absolute;z-index:2;width:800px;height:600px;transform:translate(800px,0px);transition: all 1s ease; opacity:0;}
    #tr4{position:absolute;z-index:10;transform:translate(140px,0px);}
    #img4{position:absolute;z-index:2;width:800px;height:600px;transform:translate(800px,0px);transition: all 1s ease; opacity:0;}

    #mn:hover ~ #mb{transform:translate(566px,0px); z-index:10;}
    #mb:hover{transform:translate(566px,0px);z-index:10;}
    #ancres a#lien2:target ~ #img2{opacity:1; transform:translate(0px,0px);}
    #ancres a#lien3:target ~ #img3{opacity:1; transform:translate(0px,0px);}
    #ancres a#lien4:target ~ #img4{opacity:1; transform:translate(0px,0px);}
    --></style>


    ...
    ...
    ...