Bonjour,
Je suis à la recherche d'un script pour donner une effet de zoom quand on passe la souris sur une photo dans mes pages web. (comme dans galerie windows) j'ai beaucoup de photos donc, j'aimerais trouver un script pas trop long à mettre en route.
Merci d'avance.

Salut !

Voici quelques idées :

http://www.jejavascript.net/imag_zoom.php
http://www.javascript-fx.com/navigation ... /help.html (en anglais)

Sinon, un truc simple :

Code: Tout sélectionner

<img src="image1.jpg" onmouseover="this.width=this.width*2;" onmouseout="this.width=this.width/2;"> -
<img src="image2.jpg" onmouseover="this.width=this.width*2;" onmouseout="this.width=this.width/2;">


Normalement, ça augmente la largeur ET la hauteur. Sous Firefox 3 et IE7, en tous cas.
Inconvénient : faut remanier tous les codes des images à modifier.
Avantage : vive le copier-coller !

bonsoir
merci pour ta réponse. le site jejavascript, je le connais mais il ne fonctionne pas avec mon IE7. d'après le concepteur, il marche. Il a aussi le désavantage de devoir remanier chaque image mais en grand format ce qui est très difficile pour voir la construction de ta page qui parait elle avec une image réduite.
Je vais essayer ton script. de toute façon, pour mon site, j'ai mis un comportement qui a nécessité un travail sur chaque image.
A+ pour les nouvelles

salut,
encore une question, qu'elle format d'image faut-il mettre dans ton script la petite ou la grande
merci

Euh... pouvez répétez la question ?

Je n'utilise pas plusieurs formats d'une image, là. Je modifie juste la taille de l'image, pas la source de l'image.

Pour avoir une bonne définition, il est préférable d'utiliser une image de bonne dimension, et de réduire sa taille à l'affichage. Ainsi, quand tu en as besoin, tu l'agrandis sans pixeliser.

Si tu veux avoir une taille définie en mode «normal», voici une modification du code :

Code: Tout sélectionner

<img src="image1.jpg" onmouseover="this.width=this.width*2;this.height=this.height*2;" onmouseout="this.width=this.width/2;this.height=this.height/2;" height="50" width="50">

onmouseover="this.width=this.width*2;this.height=this.height*2;" permet de doubler la largeur et la hauteur. Obligatoire si tu fixes la taille de ton image avec height="50" width="50". Si tu ne fixes pas de taille, juste onmouseover="this.width=this.width*2;" suffit, car l'image garde son ration hauteur/largeur.

Si j'ai bien compris ta dernière question (ce qui n'est peut-être pas le cas), je n'utilise qu'une seule image, celle d'origine. Je n'utilise pas de miniature de cette image. Ça évite d'avoir d'autres images à charger (si tu as 20 images, tu en charges 40 avec les miniatures), entre autres choses .

salut,
merci beaucoup pour ta réponse. En effet, en faisant mon système, je devais charger 40 photos au lieu de 20. Encore une question, où je dois mettre le script dans heat, body, image? A+

j'ai écris une réponse mais je n'arrive pas à l'annuler.

salut,
J'ai trouvé et ça marche bien dans Firefox mais pas dans IE7. J'ai regardé dans les options si quelque chose était désactivé mais je n'ai rien trouvé. Que se passe t-il?
merci encore pour ton script parce que je devais charger 40 photos pour 20 comme tu l'a très bien compris.
A +

Salut !

En fait, il n'y a pas vraiment de script. On appelle juste des fonctions Javascript sur des évènements sur les images. Or donc, ce code se colle dans la balise img, comme indiqué dans l'exemple.

Si tu travail avec un langage coté serveur (PHP, ASP, Coldfusion, ...), intégré ce code dans une boucle d'affichage est un jeu d'enfant. Sinon, faut tout coller à la main, mais ce n'est pas si terrible.

Je viens d'essayer de nouveau sur IE7, et chez moi, ça marche bien. Il y a juste le contrôle de code malicieux qui peut poser problème. Malheureusement, il n'y a rien à faire contre ça, si la personne a activer ce "contrôle", tous les javascript seront interceptés...

Si tu veux, envoies moi l'adresse de ta page en message privé, et j'irais voir, avec FF et IE, s'il y a des soucis.

Voilà ! Si tu as d'autres problèmes, tu sais où me trouver !

salut

j'ai trouvé le problème pour IE7. j'avais dans mon code une incompatibilité que j'ai pu réparer en effaçant la ligne de problème. Maintenant ça marche. Je te laisse l'adresse de mon site non encore modifié, si tu trouve dans le code un truc qui couice. Tu verra par toi-même que j'ai déjà bien planché dessus.
Encore merci.
http://www.artisansdart.ch
Encore une chose, j'aimerais faire une petite bannière pour pouvoir demander de l'insérer dans mes liens amis. comment la fabriquer?
A+