Zoom intelligent

Zoom intelligent sur image

On a parfois besoin de zoomer sur une image plus que ne le propose TOWeb. C'est à dire utiliser un zoom intelligent.

Celui-ci s'utilise avec la roulette pour zoomer ou dézoomer et le clic gauche maintenu pour se déplacer dans la fenêtre à la manière de Google Map.

Vous téléchargez d'abord ce fichier . Le reste se fait dans TW. Vous créez un champ html, vous y écrivez ceci,

<img class='zoom' src='_fields/votreimage.jpg' alt='Nom de votre image' width='800' height='600'/>
<script src="_fields/wheelzoom.js"></script>
<script>
wheelzoom(document.querySelector('img.zoom'));
</script>

Les valeurs en italique sont à modifier suivant vos données.

Dans les fichiers additionnels (le dossier _fields), vous y mettez l'image et le fichier wheelzoom.js téléchargé ci-dessus .

Vous créez autant de champs que d'images à traiter, mais (il y a souvent un 'mais'), on ne peut utiliser qu'un seul champ par rubrique (page web). Le fichier wheelzoom.js n'est à mettre qu'une seule fois dans les fichiers additionnels.

Avantage: l'image reste zoomée quand la souris n'est plus dessus.

Inconvénient: l'image n'est pas responsive.


Image test

Taille de l'image  8991 x 5057 px


Min coin


un petit jeu,
retrouvez l'extrait de l'image zoom x300%  141 x 81 px