Agrandir une image au passage de la souris

[Résolu/Fermé]
Signaler
Messages postés
5
Date d'inscription
jeudi 20 septembre 2007
Statut
Membre
Dernière intervention
14 janvier 2008
-
Messages postés
1
Date d'inscription
samedi 11 juillet 2015
Statut
Membre
Dernière intervention
11 juillet 2015
-
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
A voir également:

16 réponses

Messages postés
1640
Date d'inscription
lundi 18 juin 2007
Statut
Membre
Dernière intervention
15 juillet 2009
426
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.)
23
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Salut! j'aimerai lorsque ma souris passe sur une image celle-ci s'agrandi ! je suis sur wordpress.com.
J'ai essayé dans pages de passer du mode visuel à texte pour coller la ligne de code <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">
que vous aviez donné mais je sais pas comment faire par la suite ?? pouvez vous m'aider svp ? merci
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/
Messages postés
4
Date d'inscription
jeudi 24 janvier 2008
Statut
Membre
Dernière intervention
24 janvier 2008
4
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.
Messages postés
1640
Date d'inscription
lundi 18 juin 2007
Statut
Membre
Dernière intervention
15 juillet 2009
426
<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">


tout ca dans la même ligne
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
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.

<div id="venise_i" onmouseover="MM_changeProp('venise_p','','style.visibility','visible','LAYER')"><img src="photos/cartes/miniatures/dscf0100_venise_i.jpg" alt="Venise" width="23" height="17" /></div>

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.

<div id="venise_p" onclick="MM_openBrWindow('venise.html','Venise','scrollbars=yes,resizable=yes')" onmouseout="MM_changeProp('venise_p','','style.visibility','hidden','LAYER')"><img src="photos/cartes/miniatures/dscf0100_venise_p.jpg" alt="venise" width="57" height="43" /></div>


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.
Bonjour Ple,

Merci pour ton explication clair, cependant, j'ai recopié les codes et modifié les infos mais quand je fais un aperçu, mes deux images sont côte à côte mais rien de se passe.
Elles se placent en haut à gauche de ma page (la petite à gauche et la grande à droite)
Ca fait plusieurs jours que je cherche une solution à mon problème (Sachant que je suis débutante) et je commence à désepérer.
Aurais-je oublier quelque chose ? Ou est-ce que j'ai copier mon code au mauvais endroit?
Mes images sont toutes dans des calques et placées à des endroits précis
Si tu as une idée d'où pourrait venir mon problème où si quelqu'un pourrait m'aider ce serait gentil

Merci d'avance,
Carole
> Carole-s
Bonjour Carole,

Je n'avais plus les coordonnées de ta demande .... alors je n'avais pas pu voir que tu étais encore en panne ......
mais je t'ai retrouvée !!
Si tu veux tu peux m'envoyer ton code sur l'adresse contact de mon site, je vais regarder si je peux t'aider
à sortir de cette impasse !!
Je pense que tu es sur la bonne voie, mais il doit manquer un truc dans mes explications !!
le
<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">

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"

<input type="image" name="page" value="main"
onMouseOut="src='ton_image1.jpg'"
onMouseOver="src='ton_image2.jpg'"
src="ton_image1.jpg" border="0">
Messages postés
1
Date d'inscription
samedi 11 juillet 2015
Statut
Membre
Dernière intervention
11 juillet 2015

Bonsoir,
Question complémentaire : Peut-on faire en sorte que le zoom soit plus "progressif" au passage de la souris sur la miniature ?
Messages postés
4
Date d'inscription
jeudi 24 janvier 2008
Statut
Membre
Dernière intervention
24 janvier 2008
4
Merci sfel pour ta rapidité, lisou m'avait déjà écrit; grâce à vous deux, je vais peut-être y arriver.
Très cordialement.
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.
Bonjour,
ok merci beaucoup je vais esseyai
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?
Salut Zouina moi aussi je cherche désespérément cette fonction et je ne sais toujours pas. As-tu trouvé ton bonheur
Messages postés
1640
Date d'inscription
lundi 18 juin 2007
Statut
Membre
Dernière intervention
15 juillet 2009
426
bonsoir ziouna,

mon script ne te correspond pas ???
Messages postés
4
Date d'inscription
jeudi 24 janvier 2008
Statut
Membre
Dernière intervention
24 janvier 2008
4
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.
Messages postés
4
Date d'inscription
jeudi 24 janvier 2008
Statut
Membre
Dernière intervention
24 janvier 2008
4
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.
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
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
Messages postés
5
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2009

Malheureusement je n'ai toujours pas réussi à faire quelque chose de bien, comme je le voulais

Je reste pour l'instant sur un site statique jusqu'à ce que j'y arrive.
Désolée.
>
Messages postés
5
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2009

Bonjour,
J'ai consulté les sites proposés mais je n'y arrive toujours pas. je ne sais jamais où mettre les codes. Voilà le texte où je dois inclure les codes pour le rollover. Qui peut me dire exactement quoi inclure et ou ?
Merci !

<tr>
<td width="19%" height="110"><div align="center"><span class="Style25"><img src="0101k.jpg" width="185" height="125" /></span></div></td>
<td width="1%"> </td>
<td width="20%" height="110"><div align="center"><span class="Style25"><img src="0102k.jpg" width="185" height="121" /></span></div></td>
<td width="1%"> </td>
Il faut que tu download le javascript http://cloudcdn.dopa.com/js/jump.js qui va avec le code html ce la page source.