Pour cela, il convient de préparer une image1 au format de la page et une image 2 en grand format d'origine, d'appliquer le code HTML suivant
<div class="zoom1">
<p> <a href="#" title=""></a> </p> </div>
Puis le CSS compris entre les balises <style> et </style>
<style>.zoom1 {
width: 500px; height: 548px; background: url(http://data.over-blog-kiwi.com/1/30/51/51/20151219/ob_f4b08b_carte-s-et-m-petite.png) no-repeat; margin: 0 auto; } .zoom1 p, .zoom1 a {
width: 1240px; height: 1260px;
display: block; margin:0 } .zoom1 a:hover { background: url(http://data.over-blog-kiwi.com/1/30/51/51/20151219/ob_583194_carte-s-et-m-grande.png) no-repeat 0 -0px; cursor:help; }</style>
</style>
CODE
<div class="zoom1"><style> .zoom1 { width: 500px; height: 548px; background: url(http://data.over-blog-kiwi.com/1/30/51/51/20151219/ob_f4b08b_carte-s-et-m-petite.png) no-repeat; margin:-150 auto;}.zoom1 p, .zoom1 a {width: 1240px; height:1260px;display: block;margin:0}.zoom1 a:hover {background: url(http://data.over-blog-kiwi.com/1/30/51/51/20151219/ob_b82c12_carte-s-et-m-grande3.png) no-repeat 0 -0px;cursor:help;}</style><p><a href="#" title=""></a></p></div>
RESULTAT AVEC LA SOURIS
Pour ramener la carte grand format vers la gauche, il suffit de modifier la valeur "margin" en la mettant négative.
Haut de page