Difficulté : Experts et débutants confirmés
Schéma de la structure
Toutes les liens des photos sont sur ArchiveHost et m'appartiennent. Il est donc indispensable de vous trouver des photos dans les dimensions adéquates et de vous les stocker chez votre hébergeur favori !
En faisant un rapide calcul, sans oublier les bords qui font 2 px nous avons pour la hauteur = 165+2+167+2+135 = 471 px
longueur = 192+2+708 = 902 px
Il sera plus simple pour vous de procéder ainsi sur une feuille de papier, avant de retailler vos photos ! Vous pouvez choisir la disposition qui vous convient le mieux, avec autant hs_area que vous souhaitez en n'oubliant pas de le mentionner dans le CSS.
Bon courage !
CSS
Rien de bien difficile pour comprendre la structure du CSS. Votre container est partagé en 5 parties que l'on retrouve ainsi (.hs_area1, hs_area2 etc...)
Votre container doit avoir une largeur (width) égale à celle de vos photos et de même pour la hauteur !
<style type="text/css">
/*<![CDATA[*/
.hs_container{
position:relative;
width:902px;
height:471px;
overflow:hidden;
clear:both;
border:2px solid #fff;
cursor:pointer;
-moz-box-shadow:1px 1px 3px #222;
-webkit-box-shadow:1px 1px 3px #222;
box-shadow:1px 1px 3px #222;
}
.hs_container .hs_area{
position:absolute;
overflow:hidden;
}
.hs_area img{
position:absolute;
top:0px;
left:0px;
display:none;
}
.hs_area img.hs_visible{
display:block;
z-index:9999;
}
.hs_area1{
border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
border-top:2px solid #fff;
}
.hs_area4{
border-right:2px solid #fff;
}
.hs_area3{
border-top:2px solid #fff;
}
.hs_area1{
width:449px;
height:334px;
top:0px;
left:0px;
}
.hs_area2{
width:451px;
height:165px;
top:0px;
left:451px;
}
.hs_area3{
width:451px;
height:167px;
top:165px;
left:451px;
}
.hs_area4{
width:192px;
height:135px;
top:334px;
left:0px;
}
.hs_area5{
width:708px;
height:135px;
top:334px;
left:194px;
}
/*]]>*/
</style>
Vous pouvez trouver ce fichier ici