Vous êtes ici : Accueil → Support → Documentation → How-tos → Un effet de zoom sur les images au passage de la souris

Un effet de zoom sur les images au passage de la souris

Pour des images qui s'agrandissent lorsque la souris passe dessus...

 

Préambule


Les adaptations CSS ont été trouvées sur le site www.developpez.com.

Au deuxième niveau de notre site (http://www.montigny-le-tilleul.be), nous avons placé un menu en images. Il est constitué d’un tableau de 4 colonnes, dans lesquelles se répartissent nos images et leurs légendes.

Afin de dynamiser la présentation, nous souhaitons un effet de zoom lors du passage de la souris sur une image (comme sur http://www.montigny-le-tilleul.be/ma-commune )
 

Ajout du code CSS


A ajouter via la ZMI dans le fichier /portal_skins/custom/ploneCustom.css
/* On définit la dimension maximale de nos images au repos */
.mlt_zoom img {
    width: 100px;
    height: 100px;
}

/* Changement de taille lors du survol... */
.mlt_zoom a:hover img {
    width: 123px;
    height: 123px;
}

/* On fixe la hauteur des cellules */
.mlt_zoom td {
    height: 160px;
}

Quelques explications:

  • On définit dans la classe mlt_zoom les dimensions de nos images au repos afin d’avoir une uniformité. Toutes nos images ont une taille de 123/123 à l’origine. Nous avons choisi de les réduire au repos afin de ne pas perdre en qualité lorsque l’on zoome dessus...

  • Dans la deuxième déclaration, le sélecteur supplémentaire a:hover désigne le lien lorsqu’il est survolé par la souris. C’est à ce moment que l’on remet l’image à sa taille normale. Et c’est cela qui crée l’effet de zoom.

  • On définit enfin une hauteur de cellule (td) pour fixer le tableau. Si on ne fixe pas cette hauteur, lors d’un zoom toute la rangée en dessous va bouger vers le bas et le rendu sera peu esthétique (merci Stéphan...).

 

Utilisation du CSS


Dans la template, on utilise le code css de la manière suivante:

<div class="mlt_zoom">
<table>
<tbody>
<tr>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
</tr>
<tr>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
<td width="25%" valign="top" style="text-align: center;">
<a href="#"><img src="monimage.jpg" alt="ImageMenu.jpg"/></a>
Choix
</td>
</tr>
</tbody>
</table>
</div>

Quelques explications :

  • Nous avons simplement placé notre tableau dans une division définie avec la classe css mlt_zoom. Le code CSS se charge du reste...

  • Cette template est ajoutée aux modèles FCk pour plus de facilité.

 

Bon travail à tous

David Delvaux et Vincent Menou

Actions sur le document