-
Fond 2
En reprenant le principe de la page précédente, essayons de diviser notre image de 1000x564px et 15 parties de 200px par 188px: en largeur 5 parties de 200px=1000px et en hauteur, 3 parties de 188px=564px.
Pour les éparpiller ensuite, il est préférable de d'abord les ranger pour que l'image soit reconstituée et de garder ces positionnements au survol, alors, qu'au départ, nous allons déplacer chaque vignette selon l'ordre souhaité.
<div style="width: 1000px; height: 564px; border: 4px ridge white; margin: 0px auto;">
<p id="m1"> </p>
<p id="m2a" class="haie"> </p>
<p id="m2b" class="haie"> </p>
<p id="m2c" class="haie"> </p>
<p id="m2d" class="haie"> </p>
<p id="m2e" class="haie"> </p>
<p id="m3a" class="haie"> </p>
<p id="m3b" class="haie"> </p>
<p id="m3c" class="haie"> </p>
<p id="m3d" class="haie"> </p>
<p id="m3e" class="haie"> </p>
<p id="m4a" class="haie"> </p>
<p id="m4b" class="haie"> </p>
<p id="m4c" class="haie"> </p>
<p id="m4d" class="haie"> </p>
<p id="m4e" class="haie"> </p>
</div>
<style><!--
#m1{position:absolute; z-index:16; width:1000px; height:564px; transform:translate(0px,0px);}
.haie{position:absolute; width:200px; height:188px; background:url('http://ekladata.com/mK-KsR2as3cnujMmSjnR4QjWx58@1000x564.jpg');}
#m2a{transform:translate(0px,0px); background-position:0% 0%; }
#m2b{transform:translate(200px,0px); background-position:25% 0%; }
#m2c{transform:translate(400px,0px); background-position:50% 0%; }
#m2d{transform:translate(600px,0px); background-position:75% 0%; }
#m2e{transform:translate(800px,0px); background-position:100% 0%; }
#m3a{transform:translate(0px,188px); background-position:0% 50%; }
#m3b{transform:translate(200px,188px); background-position:25% 50%;}
#m3c{transform:translate(400px,188px); background-position:50% 50%; }
#m3d{transform:translate(600px,188px); background-position:75% 50%;}
#m3e{transform:translate(800px,188px); background-position:100% 50%; }
#m4a{transform:translate(0px,376px); background-position:0% 100%;}
#m4b{transform:translate(200px,376px); background-position:25% 100%;}
#m4c{transform:translate(400px,376px); background-position:50% 100%;}
#m4d{transform:translate(600px,376px); background-position:75% 100%;}
#m4e{transform:translate(800px,376px); background-position:100% 100%;}
--></style>
Survolez le montage.
<div style="width: 1000px; height: 564px; border: 4px ridge white; margin: 0px auto;">
<p id="z1"> </p>
<p id="z2a" class="arbre"> </p>
<p id="z2b" class="arbre"> </p>
<p id="z2c" class="arbre"> </p>
<p id="z2d" class="arbre"> </p>
<p id="z2e" class="arbre"> </p>
<p id="z3a" class="arbre"> </p>
<p id="z3b" class="arbre"> </p>
<p id="z3c" class="arbre"> </p>
<p id="z3d" class="arbre"> </p>
<p id="z3e" class="arbre"> </p>
<p id="z4a" class="arbre"> </p>
<p id="z4b" class="arbre"> </p>
<p id="z4c" class="arbre"> </p>
<p id="z4d" class="arbre"> </p>
<p id="z4e" class="arbre"> </p>
</div>
<style><!--
#z1{position:absolute; z-index:16; width:1000px; height:564px; border:1px solid red; transform:translate(0px,0px); }
.arbre{position:absolute; width:200px; height:188px; background:url('http://ekladata.com/mK-KsR2as3cnujMmSjnR4QjWx58@1000x564.jpg'); transition:all 1s linear;}
#z2a{transform:translate(400px,188px); background-position:0% 0%; }
#z2b{transform:translate(600px,376px); background-position:25% 0%; }
#z2c{transform:translate(0px,376px); background-position:50% 0%; }
#z2d{transform:translate(400px,376px); background-position:75% 0%; }
#z2e{transform:translate(0px,188px); background-position:100% 0%; }
#z3a{transform:translate(800px,376px); background-position:0% 50%; }
#z3b{transform:translate(800px,0px); background-position:25% 50%;}
#z3c{transform:translate(200px,376px); background-position:50% 50%; }
#z3d{transform:translate(0px,0px); background-position:75% 50%;}
#z3e{transform:translate(600px,0px); background-position:100% 50%; }
#z4a{transform:translate(600px,188px); background-position:0% 100%;}
#z4b{transform:translate(400px,0px); background-position:25% 100%;}
#z4c{transform:translate(800px,188px); background-position:50% 100%;}
#z4d{transform:translate(200px,0px); background-position:75% 100%;}
#z4e{transform:translate(200px,188px); background-position:100% 100%;}#z1:hover ~ #z2a{transform:translate(0px,0px); background-position:0% 0%; }
#z1:hover ~ #z2b{transform:translate(200px,0px); background-position:25% 0%; }
#z1:hover ~ #z2c{transform:translate(400px,0px); background-position:50% 0%; }
#z1:hover ~ #z2d{transform:translate(600px,0px); background-position:75% 0%; }
#z1:hover ~ #z2e{transform:translate(800px,0px); background-position:100% 0%; }
#z1:hover ~ #z3a{transform:translate(0px,188px); background-position:0% 50%; }
#z1:hover ~ #z3b{transform:translate(200px,188px); background-position:25% 50%;}
#z1:hover ~ #z3c{transform:translate(400px,188px); background-position:50% 50%; }
#z1:hover ~ #z3d{transform:translate(600px,188px); background-position:75% 50%;}
#z1:hover ~ #z3e{transform:translate(800px,188px); background-position:100% 50%; }
#z1:hover ~ #z4a{transform:translate(0px,376px); background-position:0% 100%;}
#z1:hover ~ #z4b{transform:translate(200px,376px); background-position:25% 100%;}
#z1:hover ~ #z4c{transform:translate(400px,376px); background-position:50% 100%;}
#z1:hover ~ #z4d{transform:translate(600px,376px); background-position:75% 100%;}
#z1:hover ~ #z4e{transform:translate(800px,376px); background-position:100% 100%;}
--></style>
Comme vous le voyez en comparant les deux codes, sur ce dernier, les positions des sélections, au départ, ont été mélangées et là, il n'y a pas de règle; à vous de choisir les positions avant, celles d'après étant définies.
A adapter aux dimensions de vos images et au nombre de sélections.
montages par codes HTML/CSS
Créer mon blog