Agrandir une image au passage de la souris [Résolu]

Réponse 2 / 16

leonardd

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/

Réponse 3 / 16

titoul Messages postés 4 Date d'inscription Statut Membre Dernière intervention 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.

sfel Messages postés 1640 Date d'inscription Statut Membre Dernière intervention 430

<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

Réponse 4 / 16

lisou

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 16

ple

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.

Carole-s

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

PLE > 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 !!

Réponse 6 / 16

evinrude

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">

sch-troumpfette Messages postés 1 Date d'inscription Statut Membre Dernière intervention

Bonsoir,
Question complémentaire : Peut-on faire en sorte que le zoom soit plus "progressif" au passage de la souris sur la miniature ?

Réponse 7 / 16

titoul Messages postés 4 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 8 / 16

Benbaw83

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.

Réponse 9 / 16

sin62

Bonjour,
ok merci beaucoup je vais esseyai

Réponse 10 / 16

zouina

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?

ariel

Salut Zouina moi aussi je cherche désespérément cette fonction et je ne sais toujours pas. As-tu trouvé ton bonheur

Réponse 11 / 16

sfel Messages postés 1640 Date d'inscription Statut Membre Dernière intervention 430

bonsoir ziouna,

mon script ne te correspond pas ???

Réponse 12 / 16

titoul Messages postés 4 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 13 / 16

titoul Messages postés 4 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 14 / 16

lisou

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

Réponse 15 / 16

scorpio

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

acl Messages postés 5 Date d'inscription Statut Membre Dernière intervention

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.

Prise de neurone > acl Messages postés 5 Date d'inscription Statut Membre Dernière intervention

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>

Réponse 16 / 16

agua

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

Agrandir une image au passage de la souris

16 réponses

Votre réponse

Discussions similaires