ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

COMMENT ZOOMER UNE IMAGE.

par André MARINI 19 Décembre 2015, 09:00 Images

 

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

Theme: Autofocus © 2013 - Hébergé par Overblog