Chapitre 5
Manipulation d'images

42 Zoom sur carte (II).

Problématique

A partir d’un ensemble d’éléments, faire que le survol d’un d’entre-eux par le pointeur de la souris l’affiche en plus grand. Toutefois, les éléments situés de part et d’autre de l’élément sélectionné devront être tournés vers celui-ci. Par défaut, c’est l’élément central qui doit être sélectionné.

Résolution théorique

Le principe est analogue à l’effet zoom précédent, en exploitant le pseudo-élément :hoover et les transitions.

Résolution pratique

Le squelette HTML est très classique : un élément DIV conteneur, renfermant des éléments SPAN individuels. Ces derniers referment le contenu : ici des images, mais ce pourrait être du texte ou un contenu mixte. Le nombre d’éléments peut être quelconque : il y en a ici neuf, mais cela n’a rien d’impératif. Posséder un nombre impair d’éléments améliore l’aspect visuel, mais n’est en rien une obligation technique.
<DIV class="conteneur"> <SPAN><IMG src="adresseimage1"></SPAN> <SPAN><IMG src="adresseimage2"></SPAN> … <SPAN><IMG src="adresseimagen"></SPAN> </DIV>
Le code CSS est simple au début. Tout d’abord, la définition du conteneur, avec l’établissement de la perspective et la préservation du contexte 3D, puis celle de l’élément IMG (totalement modifiable, les définitions employées ici correspondant aux caractéristiques des images employées) :
div.conteneur {width:80%; margin:1% auto 1%; padding-top:4%; perspective : 600px; transform-style: preserve-3D; } .conteneur img { height:6rem; z-index:1; border-radius:10%; border:1px solid black; }
Puis la définition de l’élément SPAN générique. Il doit être défini comme bloc en ligne, avec une position relative pour pouvoir employer avec succès la propriété z-index, fixée ici à 1.
div.conteneur span{ display: inline-block; position:relative; margin-right:-2.5%; z-index:1; }
La largeur est ici celle de l’image. La marge droite négative « rassemble » un peu les éléments, sinon trop espacés à cause des transformations.
DIV.conteneur span{ … width: 10%; }
Enfin, il est définie une transition douce d’une demi-seconde et appliqué une rotation de 45 degrés.
DIV.conteneur span{ … transition: all .5s; transform: rotateY(45deg); }
Vous définissez ensuite la position première de tous les éléments. L’élément central, ici le cinquième enfant uniquement sa taille augmentée de 50%, tandis que sa propriété z-index est fixée à 5 pour le placer au premier plan.
DIV.conteneur span:nth-child(5){ transform: scale(1.5); z-index:5; }
Ensuite, il est employé le sélecteur d’enfants adjacents ~ pour octroyer une rotation négative aux éléments qui suivent l’élément central (ici encore le cinquième élément) :
DIV.conteneur span:nth-child(5) ~span{ transform: rotateY(-45deg); }
Passons maintenant aux effets de survol. L’idée première serait d’employer simplement DIV.conteneur span:hover, mais hélas ce sélecteur est supplanté par le précédent sélecteur (DIV.conteneur span:nth-child(5) ~span), plus spécifique, et l’effet ne fonctionnerait pas à partir du 6e élément. Il faut ajouter un sélecteur encore plus spécifique pour ces derniers éléments, ici DIV span:nth-child(5) ~span:hover. Les définitions appliquées sont celles appliquées par défaut à l’élément central auparavant.
DIV.conteneur span:hover, DIV span:nth-child(5) ~span:hover { transform: scale(1.5); z-index:5; }
On applique ensuite une rotation de –45 degrés et un z-index de 1 aux enfants de l’élément survolé :
DIV.conteneur span:hover ~span { transform: rotateY(-45deg); z-index:1; }
puis une rotation de 45 degrés et un z-index de 1 à un élément non survolé, mais lorsque le DIV conteneur est survolé, afin d’annuler le comportement par défaut de l’élément central :
DIV.conteneur:hover span:not(:hover){ transform: rotateY(45deg); z-index:1; }
A noter que cet exemple n'est que partiellement adaptatif sous cette forme : il faudrait en effet ajuster plus finement les paramètres en fonction des dimensions de l'écran de l'utilisateur.

Zoom sur carte (II)