agrandir une image au passage de la souris Résolu/Fermé

Question

bonjours à tous,

je suis en pleine creation de site et je bloque sur une chose, j'ai des images miniature de 80 sur 60, 
et j 'aimerai au passage de la souris l'image s'agrandir en 320 sur 240.
Il a une exemple le site http://www.entrevue-web.fr
merci de votre aide

sfel · Accepted Answer

bonjour.

alors je vois parfaitement de quoi tu parle... (cependant, je ne le troue pas sur le site que tu donne)

il te faut réaliser un petit script en javascript, qui en fait, change l'image lorsque tu passe dessus.
Il te faut donc deux fois la mm image en 80x60 et la même en 320x240.

<input type="image" name="page" value="main" onMouseOut="src='ton_image_petite.jpg'" onMouseOver="src='img/Titre/ton_image_grande.jpg'" src="ton_image_petite.jpg" width="108" height="46" border="0">

alors il ya trois étapes.
le onMouseOut (sourie pas dessus)
le onMouseOver (sourie dessus)
et le src (c'est l'état par défaut, lorsque ta page se charge, et que la sourie a pas encore été détectée.)

sin62 · Answer

Bonjour, 
ok merci beaucoup je vais esseyai

zouina · Answer

Salut 

Moi je cherche desespérément un script qui me permetterait d'agrandir une photo à partir d'une mignature au passage de la souris et qui disparaitrait instentanèment dés que la souris s'eloigne.
Quelqu'un peut il m'aider?

sfel · Answer

bonsoir ziouna,

mon script ne te correspond pas ???

titoul · Answer

Bonjour sfel,

Je serais intéressée d'avoir la suite du lien javascript que tu as donné; malheureusement ce lien est tronqué:

<input type="image" name="page" value="main" onMouseOut="src='ton_image_petite.jpg'" onMouseOver........

la suite étant cachée par la pub à droite de l'écran; ce serait sympa que tu me le redonnes entièrement mais sur deux lignes;

Merci d'avance. Cordialement.

lisou · Answer

Dreamweaver (images survolées) sinon si c'est ça 

http://www.jarodxxx.com/public/Tutoriels/infobulle/index.html

allez là 

http://www.jarodxxx.com/?post%2F2007%2F10%2F17%2FTutoriel%3A-rollover-zoom-infobulle-sur-une-photo-ou-un-texte-en-AJAX

titoul · Answer

Merci Lisou pour ta réponse, j'avais vu ces sites mais sans résultats sur le mien après mille essais ...et des bouquins spécialisés pour les nuls; seulement, le problème est là:

"Vous aurez besoin d'un fichier java script a intégrer , quelques images pour essayer , 3 ligne de CSS et une pincée de HTML ... Ce qui donnera ca !" sur http://www.jarodxxx.com/?post%2F2007%2F10%2F17%2FTutoriel%3A-rollover-zoom-infobulle-sur-une-photo-ou-un-texte-en-AJAX

Je ne travaille mes sites persos qu'avec un éditeur wysiswyg et HTMI, CSS, Javascript, je nage en brasse ...très coulée malgré patience, courage et longueur de temps ....

Ce serait chouette à toi de me donner le code intégral (je sais c'est un énorme effort que je demande) sur, par exemple la page ci-dessous de notre ancienne maison (vendue): www.property-maison.com ; il y aurait 4 photos à ouvrir en infobulle, ce serait génial !
Après cela, lorsque j'aurai compris où mettre les "formules" magiques (entre Head et Head, Body et Body, etc...), je devrais alors y arriver.

Si c'est trop demandé, pas de pb, je comprendrais.
Sinon, un très grand merci d'avance et très cordialement.

titoul · Answer

Merci sfel pour ta rapidité, lisou m'avait déjà écrit; grâce à vous deux, je vais peut-être y arriver.
Très cordialement.

titoul · Answer

Bon, en fait, je ne sais même pas à quel endroit je dois coller ton lien; et "image.src" c'est avec les CSS ou non?

Merci d'avance pour la null des nulles.

lisou · Answer

là je pense qu'il explique bien . 

https://www.clubic.com/forum/t/javascript-rollover-images/122017

Il faut faire des essais mais c'est pas trop dur 
un peu de patience et on y arrive c'est en essayant et en faisant des erreurs qu'on fini par avancer 

Bon courage

scorpio · Answer

slt jé le meme problem mé je veu utilizé cette astusse d'agrandir l'image sous excel en utilisan lé macro alrs svp aidé moi
é merci d'avance

Benbaw83 · Answer

Bonjour,

J’ai sur mon site des images assez petites aussi et j’aimerai qu’au passage de la souris elles s'agrandissent.

Sur l'exemple http://www.jarodxxx.com/public/Tutoriels/infobulle/index.html 
Lorsqu'on passe la souris sur l’image, elle apparaît en plus grande. C'est ce que j'aimerai faire.

J’ai enregistré le site ci-dessus sur mon disque dur pour essayer. Lorsque je clique sur "index", au passage de la souris, l’image n’apparaît pas, il y a seulement le petit texte où il est écrit « logo de présentation ».

Je ne vois pas d’où vient le problème. Quelqu'un peut m'aider?

Merci de votre aide.

ple · Answer

Bonjour, J'ai rencontré le même besoin et j'ai fini par trouver !! Tu peux aller sur le site http://images.de.free.fr Là tu vas dans un pays, italie par exemple (le chargement est un peu long.....). Quand tu vas passer sur une photo, elle va s'agrandir toute seule, et quand tu vas quitter, elle va rapetisser toute seule aussi. Tu peux récupérer le source de la page en passant par 'affichage' 'afficher le code source' Le truc, c'est d'avoir les deux images superposées, la petite visible, la grande invisible. (ce sont des propriétés d'affichage). Cette première ligne contient l'image 'dscf0100venise_i.jpg' qui est la plus petite des deux onmousever dit: quand la souris passe sur l'image, la propriété d'affichage de venise_p change et elle devient visible. Cette ligne contient l'image 'dscf0100venise_p' qui est la plus grande. onmouseout dit: quand la souris quitte l'image, venise_p, la grande, devient invisible. (on click dirige vers une autre page html dont le nom est venise.html. Voilà, j'espère avoir pu t'aider, c'est effectivement galère et prise de tête ces constructions tant qu'on ne connaît pas.

agua · Answer

Il faut que tu download le javascript http://cloudcdn.dopa.com/js/jump.js qui va avec le code html ce la page source.

evinrude · Answer

le de sfel fonctionne tb C'est quoi ce dialogue de sourd ? merci d'ailleurs sfel. ça m'a pris 5 minutes et c'est nickel. une précision cependant : enlever width="108" height="46"

leonardd · Answer

c'est un peu l'effet zoom sur une image que tu cherches comme sur les boutiques en ligne (style zalendo, asos)
tu as un tutoriel ici avec le plug-in à télécharger : 
http://www.leblogdedenis.com/2012/10/02/plug-in-zoom-sur-image-effet-loupe/

Agrandir une image au passage de la souris

16 réponses

Discussions similaires