Tutoriel : Réalisez un zoom sur une image

par Valérie le 14 septembre 2007 dans Design

Voici un exemple de zoom sur image sans javascript, compatible sur tous les navigateurs et complètement valide.

Cet effet de loupe sur l'image est l'application du système de Nathan Smith inséré sur le site internet de l'agence immobilière FIKS.

Cette technique permet d'afficher une grande image au passage de la souris sur une vignette, et ceci sans déformer le layout de la page.
Nous avons adapté le code original afin qu'il corresponde au mieux à la présentation des biens d'une agence immobilière. Le client souhaitait pouvoir afficher un grand nombre de photos dans un espace restreint. Notre équipe a alors mis en place des grilles affichant les photos en vignettes qui s'agrandissent lors du survol de la souris.

Voici notre code html :

 
Nouveaux prix


        
		    WavreWavre 
        
        
		    PerwezPerwez 
        
        
		    Marbais (Bt.)Marbais (Bt.) 
        
        
		    OttigniesOttignies 
        
        
		    Saint-ServaisSaint-Servais

Et notre code CSS :

* {
	border: 0;
	margin: 0;
	padding: 0;
}

a {text-decoration: none;}

body {
	background: #fff;
	color: #222;
	font: 11px Arial, Helvetica, sans-serif;
	padding: 30px 80px;
	position: relative;
}

h1 {
	border-bottom: 4px solid #de1621;
	color: #de1621;
	font-size: 14px;
	margin-bottom: 3px;
	text-align: center;
}

.hoverbox {list-style: none;}
.hoverbox a .preview {display: none;}

.hoverbox a:hover .preview {
	display: block;
	position: absolute;
	top: -20px;
	left: -37px;
	z-index: 1;
	padding: 1px;
	background: #fff;
	border: 1px solid #de1621;
}

div {width: 200px;}
div ul.hoverbox a span {display: none;}

div ul.hoverbox a:hover span {
	background-color: #DE1621;
	color: #fff;
	display: block;
	font-size: 10px;
	left: -37px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	top: 62px;
	width: 122px;
	z-index: 1;
}

.hoverbox img {
	vertical-align: top;
	width: 46px;
	height: 46px;
}

.hoverbox li {
	display: inline;
	float: left;
	margin: 0 0 3px;
	position: relative;
	width: 200px;
}

.hoverbox .preview {
	width: 118px;
	height: 78px;
}

Sur le site Fiks.be, nous avons ajouté une balise <span> pour intégrer la locatilé et utilisé deux photos différentes pour les grilles d'images. Cependant, il est tout-à-fait possible d'en utiliser qu'une seule, comme dans le modèle de Nathan Smith1. Ceci a l'avantage de réduire considérablement le temps de chargement.

Références :

Hoverbox Image Gallery [EN] : l'exemple original

haut de page

Commentaires

Aucun commentaire pour le moment