Zoom

ppellero a écrit :

Bonjour,

Je suis a la recherche d'un script qui puisse faire un zoom d'une
vignette au passage de la souris.
Je sais le faire en CSS mais ca ne convient pas du tout.

et pourquoi ça ne convient pas ?
code ?

Je pense qu'il n'y a que le javascript pour cela.

Ben! il parait que certains savent s'en passer ?

<a href="#" class="img_01"><img src="petite_01.jpg" alt="">
<span></span></a>
<a href="#" class="img_02"><img src="petite_02.jpg" alt="">
<span></span></a>

CSS (qui charge les grandes images à l'ouverture) :
================================================== a img { border: 0 }
a span { display: none; position: absolute; width: 400px; height: 300px;
background: no-repeat center center #ccc; }
a:hover span { display: block }
a.img_01 span { background-image: url(grande_01.jpg); }
a.img_02 span { background-image: url(grande_02.jpg); }

Mais voila moi je ne suis pas capable de le faire.

Faire "quoi" exactement ?
Zoomer dans l'image ?
Zoom à côté ?
Zoom à la place ?
Les grandes vues doivent être post-chargées ?

Merci de votre attention.

<img src="vue_normale.jpg" width="200"
onmouseover="this.style.width=this.width*2+'px';"
onmouseout="this.style.width='';"
alt = "image largeur 400px"
title="zoomez-moi">


--
sm

SAM a écrit :

ppellero a écrit :

Bonjour,

Je suis a la recherche d'un script qui puisse faire un zoom d'une
vignette au passage de la souris.
Je sais le faire en CSS mais ca ne convient pas du tout.

et pourquoi ça ne convient pas ?
code ?

Je pense qu'il n'y a que le javascript pour cela.

Ben! il parait que certains savent s'en passer ?

<a href="#" class="img_01"><img src="petite_01.jpg" alt="">
<span></span></a>
<a href="#" class="img_02"><img src="petite_02.jpg" alt="">
<span></span></a>

CSS (qui charge les grandes images à l'ouverture) :
======================== ========================= ==
a img { border: 0 }
a span { display: none; position: absolute; width: 400px; height: 300px ;
background: no-repeat center center #ccc; }
a:hover span { display: block }
a.img_01 span { background-image: url(grande_01.jpg); }
a.img_02 span { background-image: url(grande_02.jpg); }

Mais voila moi je ne suis pas capable de le faire.

Faire "quoi" exactement ?
Zoomer dans l'image ?
Zoom à côté ?
Zoom à la place ?
Les grandes vues doivent être post-chargées ?

Merci de votre attention.

<img src="vue_normale.jpg" width="200"
onmouseover="this.style.width=this.width*2+'px';"
onmouseout="this.style.width='';"
alt = "image largeur 400px"
title="zoomez-moi">

ces type de zoom déplacent les autres images à coté quand on agrand i.
J'ai vu des zoom ou l'image grossie viens pardessus et ne bouleverse pas
la page

--
Paul Pellero Agay (Var)
mailto:paulpellero@wanadoo.fr
Site: http://www.pellero.net

ppellero a écrit :

SAM a écrit :

ppellero a écrit :

Bonjour,

Je suis a la recherche d'un script qui puisse faire un zoom d'une
vignette au passage de la souris.
Je sais le faire en CSS mais ca ne convient pas du tout.

et pourquoi ça ne convient pas ?

ces type de zoom déplacent les autres images à coté quand on agrandi.
J'ai vu des zoom ou l'image grossie viens pardessus et ne bouleverse pas
la page

Ce devrait être à mon sens de simples réglages CSS.
(bien que ce ne soit pas touj facile avec IE)
<http://stephane.moriaux.pagesperso-orange.fr/truc/zoom-img.htm>


Bon, allez, un truc simple en JS
<http://stephane.moriaux.pagesperso-orange.fr/truc/zoom_image_js/>


--
sm

SAM a écrit :

ppellero a écrit :

SAM a écrit :

ppellero a écrit :

Bonjour,

Je suis a la recherche d'un script qui puisse faire un zoom d'une
vignette au passage de la souris.
Je sais le faire en CSS mais ca ne convient pas du tout.

et pourquoi ça ne convient pas ?

ces type de zoom déplacent les autres images à coté quand on agr andi.
J'ai vu des zoom ou l'image grossie viens pardessus et ne bouleverse
pas la page

Ce devrait être à mon sens de simples réglages CSS.

Oui c'est vrai après réglage, maintenant le zoom sur chaque vignettes
marche bien sans déranger la page.

(bien que ce ne soit pas touj facile avec IE)
<http://stephane.moriaux.pagesperso-orange.fr/truc/zoom-img.htm>


Bon, allez, un truc simple en JS
<http://stephane.moriaux.pagesperso-orange.fr/truc/zoom_image_js/>

Merci pour les liens je vais les visiter.

A+

--
Paul Pellero Agay (Var)
mailto:paulpellero@wanadoo.fr
Site: http://www.pellero.net