-
Rangement 2
Dans ce montage, vous n'avez besoin que de 3 adresses de vos images, en 800x600px, à placer à la place des miennes.
Le code est long mais répétitif puisque les images sont découpées en 8 parties animées, mises en mouvement par 3 boutons.
Le positionnement des parties d'images peut être différent pour chaque image, ce qui n'est pas le cas dans le code indiqué.
<div id="fd">
<p id="bt1"><img src="http://ekladata.com/r_UCVJwN26YZinqft9y32T9M85U/btv.png" alt="" /></p>
<p id="bt2"><img src="http://ekladata.com/UudsLrfQBT-rQu81Cg4XdyHHm94/btr.png" alt="" /></p>
<p id="bt3"><img src="http://ekladata.com/P2Q4FX2JD4PwfwP8FEP1ffHkUkE/btj.png" alt="" /></p>
<p id="s1"> </p>
<p id="s2"> </p>
<p id="s3"> </p>
<p id="s4"> </p>
<p id="s5"> </p>
<p id="s6"> </p>
<p id="s7"> </p>
<p id="s8"> </p>
<p id="s1a"> </p>
<p id="s2a"> </p>
<p id="s3a"> </p>
<p id="s4a"> </p>
<p id="s5a"> </p>
<p id="s6a"> </p>
<p id="s7a"> </p>
<p id="s8a"> </p>
<p id="s1b"> </p>
<p id="s2b"> </p>
<p id="s3b"> </p>
<p id="s4b"> </p>
<p id="s5b"> </p>
<p id="s6b"> </p>
<p id="s7b"> </p>
<p id="s8b"> </p>
</div>
<style type="text/css"><!--
#fd{position:relative; width:800px; height:600px; margin:10px auto; border:4px ridge white; background:url('http://ekladata.com/-3mJ7M8uQGc1iT14retwPCEExJc/back121.jpg'); }
#s1{transition:all 2s linear 0s; position:absolute; z-index:1; transform:translate(600px,200px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:0% 0%;}
#s2{transition:all 2s linear 0s; position:absolute; z-index:1; transform:translate(300px,100px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:0% 100%;}
#s3{transition:all 2s linear 0s;position:absolute; z-index:1; transform:translate(100px,150px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:100% 0%;}
#s4{transition:all 2s linear 0s;position:absolute; z-index:1; transform:translate(100px,50px) rotate(25deg) ; width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:100% 100%;}
#s5{transition:all 2s linear 0s; position:absolute; z-index:1; transform:translate(400px,300px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:33.3% 0%;}
#s6{transition:all 2s linear 0s; position:absolute; z-index:1; transform:translate(500px,150px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:33.3% 100%;}
#s7{transition:all 2s linear 0s;position:absolute; z-index:1; transform:translate(100px,300px) rotate(40deg); width:150px; height:150px;border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:66.7% 0%;}
#s8{transition:all 2s linear 0s;position:absolute; z-index:1; transform:translate(450px,70px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/5ZHKKJVnwlx15dqr8DCqK8OS6uc/6150.jpg'); background-position:66.7% 100%;}#s1a{transition:all 2s linear 0s; position:absolute; z-index:2; transform:translate(600px,200px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:0% 0%;}
#s2a{transition:all 2s linear 0s; position:absolute; z-index:2; transform:translate(300px,100px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:0% 100%;}
#s3a{transition:all 2s linear 0s;position:absolute; z-index:2; transform:translate(100px,150px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:100% 0%;}
#s4a{transition:all 2s linear 0s;position:absolute; z-index:2; transform:translate(100px,50px) rotate(25deg) ; width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:100% 100%;}
#s5a{transition:all 2s linear 0s; position:absolute; z-index:2; transform:translate(400px,300px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:33.3% 0%;}
#s6a{transition:all 2s linear 0s; position:absolute; z-index:2; transform:translate(500px,150px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:33.3% 100%;}
#s7a{transition:all 2s linear 0s;position:absolute; z-index:2; transform:translate(100px,300px) rotate(40deg); width:150px; height:150px;border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:66.7% 0%;}
#s8a{transition:all 2s linear 0s;position:absolute; z-index:2; transform:translate(450px,70px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/WuaDczKftAG5BS1HYIsAubiqCYY/6154.jpg'); background-position:66.7% 100%;}#s1b{transition:all 2s linear 0s; position:absolute; z-index:3; transform:translate(600px,200px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:0% 0%;}
#s2b{transition:all 2s linear 0s; position:absolute; z-index:3; transform:translate(300px,100px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:0% 100%;}
#s3b{transition:all 2s linear 0s;position:absolute; z-index:3; transform:translate(100px,150px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:100% 0%;}
#s4b{transition:all 2s linear 0s;position:absolute; z-index:3; transform:translate(100px,50px) rotate(25deg) ; width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:100% 100%;}
#s5b{transition:all 2s linear 0s; position:absolute; z-index:3; transform:translate(400px,300px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:33.3% 0%;}
#s6b{transition:all 2s linear 0s; position:absolute; z-index:3; transform:translate(500px,150px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:33.3% 100%;}
#s7b{transition:all 2s linear 0s;position:absolute; z-index:3; transform:translate(100px,300px) rotate(40deg); width:150px; height:150px;border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:66.7% 0%;}
#s8b{transition:all 2s linear 0s;position:absolute; z-index:3; transform:translate(450px,70px) rotate(40deg); width:150px; height:150px; border:3px solid white; box-shadow:3px 3px 5px black; background:url('http://ekladata.com/3EDuYfna8eX0Fy2Go5ZhPYTFuLo/6173.jpg'); background-position:66.7% 100%;}#bt1{position:absolute; z-index:15; width:40px; height:40px; background-size:cover; transform:translate(750px,20px);}
#bt2{position:absolute; z-index:15; width:40px; height:40px; background-size:cover; transform:translate(750px,80px);}
#bt3{position:absolute; z-index:15; width:40px; height:40px; background-size:cover; transform:translate(750px,140px);}#bt1:hover ~ #s1{z-index:10; transform:translate(0px,-22px); width:200px; height:300px;border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s2{z-index:10;transform:translate(0px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s3{z-index:10;transform:translate(600px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s4{ z-index:10; transform:translate(600px,278px) rotate(0deg); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s5{z-index:10; transform:translate(200px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s6{z-index:10; transform:translate(200px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s7{z-index:10; transform:translate(400px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt1:hover ~ #s8{z-index:10; transform:translate(400px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}#bt2:hover ~ #s1a{z-index:10; transform:translate(0px,-22px); width:200px; height:300px;border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s2a{z-index:10;transform:translate(0px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s3a{z-index:10;transform:translate(600px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s4a{ z-index:10; transform:translate(600px,278px) rotate(0deg); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s5a{z-index:10; transform:translate(200px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s6a{z-index:10; transform:translate(200px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s7a{z-index:10; transform:translate(400px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt2:hover ~ #s8a{z-index:10; transform:translate(400px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}#bt3:hover ~ #s1b{z-index:10; transform:translate(0px,-22px); width:200px; height:300px;border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s2b{z-index:10;transform:translate(0px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s3b{z-index:10;transform:translate(600px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s4b{ z-index:10; transform:translate(600px,278px) rotate(0deg); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s5b{z-index:10; transform:translate(200px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s6b{z-index:10; transform:translate(200px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s7b{z-index:10; transform:translate(400px,-22px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
#bt3:hover ~ #s8b{z-index:10; transform:translate(400px,278px); width:200px; height:300px; border-radius:0%; border:0px solid white; box-shadow:0px 0px 0px black;}
--></style>
...
...
...
montages par codes HTML/CSS
Créer mon blog