-
Diaporama 24
Toujours sur le même principe: menu à survoler et boutons à cliquer.
8 images en 800x600px....
<div id="fd">
<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> <a id="lien5" class="ancre"></a> <a id="lien6" class="ancre"></a> <a id="lien7" class="ancre"></a> <a id="lien8" class="ancre"></a>
<p id="mn">Menu</p>
<p id="mb"><a href="#lien0"><span id="tr0" style="font-size: 20pt; color: yellow; text-shadow: 1px 1px black;">X</span></a><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> <a href="#lien5"><img id="tr5" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien6"><img id="tr6" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien7"><img id="tr7" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a> <a href="#lien8"><img id="tr8" src="http://ekladata.com/35qvnXAnYiHBYXkGdZ2x138Y6i4/bt24.gif" alt="" /></a></p>
<p id="m1"> </p>
<p id="m2"> </p>
<p id="m3"> </p>
<p id="m4"> </p>
<p id="m5"> </p>
<p id="m6"> </p>
<p id="m7"> </p>
<p id="m8"> </p>
</div>
</div>
<style><!--
#fd{position:relative; margin:10px auto; width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 8px black; 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:430px; 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);}
#tr2{position:absolute;z-index:10;transform:translate(60px,0px);}
#tr3{position:absolute;z-index:10;transform:translate(100px,0px);}
#tr4{position:absolute;z-index:10;transform:translate(140px,0px);}
#tr5{position:absolute;z-index:10;transform:translate(180px,0px);}
#tr6{position:absolute;z-index:10;transform:translate(220px,0px);}
#tr7{position:absolute;z-index:10;transform:translate(260px,0px);}
#tr8{position:absolute;z-index:10;transform:translate(300px,0px);}
#m1{transition:all 1s linear; position:absolute; transform:translate(200px,0px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/6iLay0A2AgtD13zFaYR6jxRw6O8/DSCN6206.jpg'); background-size:cover; border:3px solid white;}
#m2{transition:all 1s linear; position:absolute; transform:translate(400px,0px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/kxJ7St0bUaGQrubiqtaZYjZSYps/DSCN6208.jpg'); background-size:cover; border:3px solid white;}
#m3{transition:all 1s linear; position:absolute; transform:translate(600px,0px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/gMHfpy25SfXYO5BKobP6NCuosus/DSCN6209.jpg'); background-size:cover; border:3px solid white;}
#m4{transition:all 1s linear; position:absolute; transform:translate(800px,0px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/v4LmyAYofaLZF8upHoM7oqi6rV8/DSCN6210.jpg'); background-size:cover; border:3px solid white;}
#m5{transition:all 1s linear; position:absolute; transform:translate(200px,300px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/Wg6ZPRRApA8Nid-6yOp6xHl1sOQ/DSCN6211.jpg'); background-size:cover; border:3px solid white;}
#m6{transition:all 1s linear; position:absolute; transform:translate(400px,300px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/xPWb7YedubBWjZcxJ6sYGClzmlo/DSCN6212.jpg'); background-size:cover; border:3px solid white;}
#m7{transition:all 1s linear; position:absolute; transform:translate(600px,300px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/8Oj8ALIGNwZR5A5uVxKOc0aJZ8Y/DSCN6213.jpg'); background-size:cover; border:3px solid white;}
#m8{transition:all 1s linear; position:absolute; transform:translate(800px,300px) rotate(90deg); width:294px; height:194px; transform-origin:0px 0px; background:url('http://ekladata.com/YZde_Xo5Y7Iy4Wqkonvqe0I_vA4/DSCN6214.jpg'); background-size:cover; border:3px solid white;}
#mn:hover ~ #mb{transform:translate(366px,0px); z-index:10;}
#mb:hover{transform:translate(366px,0px);z-index:10;}
#ancres a#lien1:target ~ #m1{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien2:target ~ #m2{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien3:target ~ #m3{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien4:target ~ #m4{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien5:target ~ #m5{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien6:target ~ #m6{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien7:target ~ #m7{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
#ancres a#lien8:target ~ #m8{z-index:2;transform:translate(0px,0px) rotate(0deg); width:800px; height:600px; border:0px;}
--></style>
...
...
montages par codes HTML/CSS
Créer mon blog