Ce que nous allons réaliser
survolez la planète avec votre curseur de souris
Préparation
Pour réaliser cette application vous aurez besoin des éléments suivants :
- Votre image : celle-ci doit etre d'une résolution correcte, le cas contrainte vous expose au risque d' un résultat de mauvaise qualité lors du zoom générer par la loupe. Pour info, l'image choisi dans cette exemple à une résolution d'origine de 1517px x 1617px (soit environ 2.4 Mpx).
- Téléchargez JQuery, j'utilise pour cet exemple la dernière version (JQuery v.1.8.2) mais il fonctionne tout aussi bien sur les versions antérieures.
Pour télécharger la bibliothèque : sur le site JQuery.com ou sur ce site
- Et d'un peu de CSS ! A vous de voir si vous créer une feuille de style indépendante, pour ma part je l'intègre directement dans le document HTML, celui-ci étant relativement court.
Le code
Et voici le code permettant cette application, il ne vous reste plus qu'à y insérer vos url de document image, JQuery et eventuellement CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titre de votre document</title>
<style type="text/css">
/*on définit le conteneur de l'image, sa largeur est celle de l'image dans son affichage petit format */
.imgcontent {
width: 506px;
margin: 50px auto;
position: relative;
}
/*on crée la loupe*/
.loupe {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
/*on donne un effet de verre à cette loupe*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*indiquez l'url de votre image*/
background: url(ici url de votre image);
/*la loupe et l'image première sont masquées*/
display: none;
}
.mini {
display: block;
}
</style>
</head>
<body>
<!-- le conteneur -->
<div class="imgcontent">
<!--on y intègre la loupe (masquée) qui contient l'image dans son format original -->
<div class="loupe"></div>
<!-- on affiche l'image dans son format réduit -->
<img class="mini" src="ici url de votre image" width="506"/>
</div>
<!-- ########################### on appelle JQuery ################################# -->
<script src="ici url de votre fichier jquery.js" type="text/javascript"></script>
<!-- on insère le Javascript-->
<script type="text/javascript">
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
//On détermine les actions relatives à la souris
$(".imgcontent").mousemove(function(e){
//Lorsque l'utilisateur passe sur l'image, le script va d'abord calculer les dimensions , une fois disponibles, le script affiche la version agrandie.
if(!native_width && !native_height)
{
//on crée un nouvel objet image
var image_object = new Image();
image_object.src = $(".mini").attr("src");
//on intègre le code dans la fonction de charge
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//on détermine la position de la loupe par rapport au document
var imgcontent_offset = $(this).offset();
var mx = e.pageX - imgcontent_offset.left;
var my = e.pageY - imgcontent_offset.top;
//on fait disparaitre la loupe si le curseur de la souris est en dehors du conteneur
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".loupe").fadeIn(100);
}
else
{
$(".loupe").fadeOut(100);
}
if($(".loupe").is(":visible"))
{
//on modifie la position de la grande image (chargée dans la loupe) en fonction de la position de la loupe sur la petite image
var rx = Math.round(mx/$(".mini").width()*native_width - $(".loupe").width()/2)*-1;
var ry = Math.round(my/$(".mini").height()*native_height - $(".loupe").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".loupe").width()/2;
var py = my - $(".loupe").height()/2;
//le verre se déplace avec la souris
$(".loupe").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
</script>
</body>
</html>
Conclusion
N'hésitez pas à modifier les dimensions d'images et de la loupe selon vos besoins.
Cette application fonction parfaitement sur les navigaeurs récents mais la loupe à quelques problème d'affichage sur les versions plus anciennes.