CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 05 22:25:36

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 879 membres
377 nouveaux aujourd'hui
15 045 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 022 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS !

Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : loupe, image, zoom, agrandir, photo Niveau : Débutant Date de création : 03/07/2006 Date de mise à jour : 04/07/2006 19:44:35 Vu / téléchargé: 38 653 / 3 957

Auteur : adelami

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

9,20 / 10

Commentaire sur cette source (28)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

C'est un carré (un div) qui contient une image plus grosse que celle derrière le div et qui change de position au move de la souris ! Bref, je suis nul pour les explications, voyez le code que j'ai resorti du placard et donnez votre avis!
Fonctionne parfaitement sous IE et sous Firefox (Merci à Bultez) mais sous firefox c'est lent ...
Un exemple ici : http://monweb.aliceadsl.fr/ahalfaoui/loupe.html
Pour DomJ : le script est désormais paramétrable (zoom et taille de la loupe) !!
Merci pour vos commentaires et vos notes

Source

alert("Liberez moi de mon zip !!!")

alert("Liberez moi de mon zip !!!")

Conclusion

Pour une adaptation firefox, pour un report de bug un conseil ... N'hesitez pas!!
Soyez sympas, c'est l'un de mes premiers codes, et je suis très débutant ...
PS: J'ai appris à développer en JS grace à Microsoft, d'où les problèmes d'incompatibilité !

Exemple : http://monweb.aliceadsl.fr/ahalfaoui/loupe.html

Adelami - www.harisa.tk - cooloupastoday@hotmail.com

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

chien.jpg 128 457 octets
loupe.htm 1 546 octets

Télécharger le zip

Historique

04 juillet 2006 19:44:35 :: Compatible Firefox grâce à Bultez Parametrable par la suggestion de DomJ

Sources du même auteur

EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...

ALBUM PHOTOS "3D"

MANÈGE 3D

Toutes les sources de adelami

Sources de la même categorie

FENETRE DE LOGIN par kazma

MESSAGES VIRTUELS par grarestephane

ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane

INFO BULLES STANDARD COMPATIBLE FF,IE,CHROME,OPERA SIMPLE D'... par alex3105

FENETRES DÉPLACABLES ET REDIMENSIONNABLE PAR LA SOURIS par pdc_666

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

ZOOM SUR IMAGE A LA SOURIS par kazma

ZOOM À COULISSE POUR AGRANDIR ET MINIMISER LE CONTENU DE PAR... par abdelaziz_info

EFFET D'OUVERTURE PAR ZOOM D'IMAGE par PetoleTeam

ZOOM SUR UNE IMAGE par neolien

POP UP ZOOM D'UNE IMAGE PRESQUE PARFAIT par bouillou32

Commentaires et avis

Commentaire de adelami le 03/07/2006 19:14:49

Le cadre à été ajouté par la suite à la capture mais il est facile à faire avec : style="border-style:solid;border-width:1" !
A vos claviers !

Commentaire de DomJ le 04/07/2006 02:18:08

7/10
Explication:
On ne peut pas modifier la grandeur de l'image...
C'est beau quand même continu tes scripts!

DomJ

Commentaire de bultez le 04/07/2006 10:38:01

une version ( à peine modifiée de l'original )
qui fonctionne avec IE,FF,Opera..

<HTML><HEAD>
<TITLE></TITLE>
<script type="text/javascript"></script>
</HEAD>
<BODY onmousemove="document_onmousemove(event);">
<img src="image.jpg" style="position:absolute;top:0;left:0" width=200>
<div id="div1"
     style="width:50;height:50;overflow:hidden;position:absolute;top:0;left:0">
<img id="img1"
     src="image.jpg" style="position:absolute" width=400>
</div>
</BODY></HTML>

pour les autres navigateurs que IE,
il faut un .htm au lieu du .hta.

Commentaire de andros le 04/07/2006 23:21:57

Waouhh ! Un code si court avec autant d'effet !!

Petit rapport de bug :

-sur la page d'exemple, le code ne marche pas avec opera et mozilla (d'ailleurs le code est différent de celui du zip).

-en local avec le zip : ok avec mozilla et opéra, ok avec ie mais contient quand même une erreur au chargement de la page à la ligne : document.getElementById("div1").style.left=x-(carre/2); (en htm comme en hta) ensuite ça marche nickel (en htm comme en hta).

Sinon :
/*@cc_on ie = true; @*/ => où peut-on apprendre des trucs pareils ?

Merci.

Commentaire de adelami le 05/07/2006 09:00:38

Bonjour,
Pour ce qui est de l'incompatibilité de l'exemple avec ff et opera, c'est dû au fait que je n'ai pas mis mon exemple à jour suite aux modifications...
Pour le reste, j'avoue que quelque chose m'échappe ! Mon débogueur n'affiche rien de précis... ni ie ni ff ni rien ...
Pour ca : /*@cc_on ie = true; @*/ je me demande aussi où l'on peut l'apprendre, puisque j'ai utilisé directement le code modifié de BULTEZ ...

Commentaire de bultez le 05/07/2006 10:06:40

salut Adelami,

ça veut dire que mon exemple ne fonctionne pas ?
c'est possible ! mais tel que je l'ai mis, ça
marchait, enfin, chez moi, avec IE,FF,Opera...

explications à propos de /*@cc_on...*/
c'est de la "compilation conditionnelle"
ce n'est traité que par IE. les autres
navigateurs consièrent ça comme du commentaire.
( donc seil IE mettra la variable ie à true )

Commentaire de adelami le 05/07/2006 11:27:31

Bien bien, merci
Non ton exemple fonctionne très bien je l'ai réadapté mais c'est plutot la page d'exemple que j'ai publiée que j'ai oublié de mettre à jour !
Merci pour l'explication!
A bientot

Commentaire de worstangel le 05/07/2006 19:49:46

Joli code mais un truc pour que ce soit plus sympa :

1. Essaye de faire disparaître la souris au survol de l'image, qu'on ne se situe que par rapport à ta loupe...
Ca pourrait êter mieux puis ça augmenterais la visibilité dans le cadre de la loupe donnée.

2. Tu pourrais aussi mettre un "bouton" comme opur regler un volume mais ici, qu'il soit fait pour augmenter ou reduire la taille de la loupe. Puis un autre pour la puissance de la loupe.

Bonne continuation...
Amicalement, WA.

Commentaire de ndubien le 05/07/2006 20:38:05

Je trouve cet effet trop bien! A+

Commentaire de hackshell le 11/07/2006 08:57:46

50 lignes de pure bonheur...

Chapeau bas !! Adelami,vraiment bo boulot..(10/10)

Commentaire de vduffaut le 22/07/2006 15:10:10

Sous mon Mozilla Firefox 1.5.0.4 avec Javascript activé, rien ne se passe... même si j'attends très longtemps (avec le site test) : quelqu'un a-t'il une idée ?

Sous IE : c'est bon et effectivement extrêmement simple !

Bravo

Commentaire de jmeunier le 23/09/2006 13:07:18

script pour éviter de préciser la dimension de l'image à chaque fois :

loupe.htm

<html>
<head>
<title></title>
<script language="javascript">

wi = 0
wi2 = 0

function dimension()
{

wi = document.img01.width
wi2 = wi * 2

v = '<HTML><HEAD>'
v = v + '<TITLE></TITLE>'
v = v + '<script lang'+'uage="Ja'+'vaScr'+'ipt" type="text/ja'+'vascr'+'ipt" src="loupe.js"></sc'+'ript>'
v = v + '</HEAD>'
v = v + '<BODY onmousemove="docume'+'nt_on'+'mou'+'semove(ev'+'ent);">'
v = v + '<img src="chien.jpg" style="position:absolute;top:0;left:0" width='+wi+'>'
v = v + '<div id="div1" style="width:50;height:50;overflow:hidden;position:absolute;top:0;left:0">'
v = v + '<img id="img1" src="chien.jpg" style="position:absolute" width='+wi2+'>'
v = v + '</div>'
v = v + '</BODY></HTML>'

document.write(v)
document.close()
}
</script>
</head>
<body>
<img src='chien.jpg' border='0' name='img01' onLoad="dimension()">
</body>
</html>

loupe.js

function document_onmousemove(event)
{
var ie = false; /*@cc_on ie = true; @*/
if (ie) {
         x=event.x+document.body.scrollLeft;
         y=event.y+document.body.scrollTop;
             }
else    {
x=event.pageX;
         y=event.pageY;
             }
document.getElementById("div1").style.left=x-25;
document.getElementById("div1").style.top=y-25;
document.getElementById("img1").style.top=(-(y)*2)+25;
document.getElementById("img1").style.left=(-(x)*2)+25;
}

Commentaire de jmeunier le 23/09/2006 17:02:19

amélioration pour éviter de taper 3 fois le nom de l'image

loupe.htm

<html>
<head>
<title>fresque photos insolites</title>
<script language="javascript">
var wi = 0
var wi2 = 0
var n = ""

function dimension()
{
n = document.img01.src
wi = document.img01.width
wi2 = wi * 2

v = '<HTML><HEAD>'
v = v + '<TITLE>fresque photos insolites</TITLE>'
v = v + '<LINK rel=stylesheet type="text/css" href="jac.css">'
v = v + '<scr'+'ipt lang'+'uage="Ja'+'vaScr'+'ipt" type="text/ja'+'vascr'+'ipt" src="loupe.js"></sc'+'ript>'
v = v + '</HEAD>'
v = v + '<BODY onmousemove="docume'+'nt_on'+'mou'+'semove(ev'+'ent);">'
v = v + '<img src="'+n+'" style="position:absolute;top:0;left:0" width='+wi+'>'
v = v + '<div id="div1" style="width:50;height:50;overflow:hidden;position:absolute;top:0;left:0">'
v = v + '<img id="img1" src="'+n+'" style="position:absolute" width='+wi2+'>'
v = v + '</div>'
v = v + '</BODY></HTML>'

document.write(v)
document.close()
}
</script>
</head>
<body>
<img src='terre.jpg' border='0' name='img01' onLoad="dimension()">
</body>
</html>

Commentaire de thetrouf le 06/10/2006 15:22:22

Trés bien cette loupe

Mais j'ai juste un petit probléme.
Comment peut on déplacer cette ensemble dans une page ? pour l'instant elle est bloquée en haut à gauche.

J'ai l'impression qu'on est bloqué par "position= absolute" et même en changeant "top" et "left" ça ne change pas la position de la loupe.

pourriez m'aider en html
merci

Commentaire de jmeunier le 07/10/2006 10:29:32

Il y a un script qui permet cela sur :
http://valid.tjp.hu/zoom/

Commentaire de jmeunier le 07/10/2006 17:18:25

ps : je l'ai mis en ligne sur
http://www.sesame-ouvre-toi.net

Commentaire de abdelaziz_info le 28/12/2006 03:50:55

Bonjour à tous :

Suite à un Message envoyé par intesmicro le 22/12/2006 19:13:49

Sur le réseau …… !

« Bonsoir, je viens de télécharger votre zip pour cacher le pointeur de la souris. Je cherche juste à cacher la flèche dans le cas ou j'utilise l'effet loupe grace au zip suivant :
http://www.javascriptfr.com/code.aspx?ID=38424
Je souhaite donc que la flèche disparaisse (mais pas l'effet loupe) seulement sur l'image mais pas dans le reste de la page. Pensez-vous que cela soit possible avec une de vos réalisations et si oui comment procéder ? (quel scrip utiliser, ou mettre la référence à l'image, etc.) Merci d'avance pour votre réponse, bien cordialement, JFR » fin de message.

J’ai posé à la disposition de tout le monde une solution de ce problème sur l’adresse suivante : http://abdelaziz.site.voila.fr/loupe.htm
Vous trouverez un exemple complet que vous pourrez tester directement en ligne sur (Microsoft Internet Explorer) mais tenez compte à votre connexion …

Curseur invisible comme demandé … Sans aucune modification du code (js) de la source « http://www.javascriptfr.com/code.aspx?ID=38424 »
Je me suis servi seulement de l’idée que j’avais postée sur « http://www.javascriptfr.com/code.aspx?ID=35807 »

Un zip est également disponible à la même adresse notée ici dessus.
Et vous pouvez toujours me contacter sur cette adresse : http://abdelaziz.site.voila.fr/contact.htm

merci...!

Commentaire de carate le 14/03/2007 14:51:57

super bien fait ton script 10/10
bravo

Commentaire de bhundu le 21/04/2007 07:46:20

Salut,
merci pour ton script, le rendu est vraiment super !!
j'ai essayé de l'adapter pour mais besoins avec comme résultat attendu : la partie zommée qui reste fixe et qui sagrandi se que pointe le curseur.
le probleme c'est que chuis nul en javascript et que sa fait un décalage et qu'en plus y doit y avoir moyen d'alleger tout sa, alors si quelquun peu me coriger le script suivant ce serait super sympa :

<HTML><HEAD>
<TITLE></TITLE>
<script type="text/javascript"></script>
</HEAD>
<BODY onmousemove="document_onmousemove(event);" onload="reglages()"> <center>
<img id=initiale src="chien.jpg" style="position:absolute;top:50;left:50" width=200>
<div id="div1"
     style="width:50;height:50;overflow:hidden;position:absolute;top:50;left:500">
<img id="img1"
     src="chien.jpg" style="position:absolute" width=400>
</div>

</center></BODY></HTML>

merci d'avance

Commentaire de vive2 le 25/07/2007 16:31:52

cool merci beaucoup et ton chien il est classe avec des lunette

Commentaire de abdelaziz_info le 09/11/2007 03:29:18

Je vous annonce que le curseur est aussi totalement invisible sur l'image sous Firefox, grâce au source : http://www.javascriptfr.com/codes/CURSEUR-INVISIBLE_35807.aspx
Récemment modifier pour ce but.

Pour ceux qui sont intéressés de voir l’exemple sur cette adresse : http://abdelaziz.site.voila.fr/loupe.htm
Un zip est également disponible à la même adresse.

Commentaire de shefentekheux le 21/05/2008 03:27:54

bonjour

peut on avoir le meme effet mais dans une fenetre differente comme sur ce site http://www.delaveine.com/montres-accessoires-m,clock-4601a-marron.html

merci pour votre reponse

Commentaire de kazma le 30/05/2008 22:56:28 10/10

le script est vraiment bien fait le div avec overflow=hidden
il fallait vraiment y penser.le script merite un 10/10.
sinon pour mettre l'image a l'endroit ou l'on veut il sufit de completer les deux lignes qui gere le deplacement du div par:
+document.getElementById("initiale").offsetTop*zoom)
et
+document.getElementById("initiale").offsetLeft*zoom)
ce qui donne:
document.getElementById("img1").style.top=-setY*zoom)+carre/2)+document.getElementById("initiale").offsetTop*zoom)
document.getElementById("img1").style.left=-setX*zoom)+carre/2)+document.getElementById("initiale").offsetLeft*zoom)

Commentaire de kazma le 31/05/2008 19:51:31

petite rectification sur l'ajout de script que j'ai fait avant

document.getElementById("img1").style.top=(-(y)*zoom)+(carre/2)+document.getElementById("initiale").offsetTop*zoom)
document.getElementById("img1").style.left=(-(x)*zoom)+(carre/2)+document.getElementById("initiale").offsetLeft*zoom)
la c'est bon
et aussi si on ne veut pas voir le pointeur de sourie il suffit de creer une image vide ayant l'extention .cur avec the gimp par exemple et au passage sur l'image (onmouseover) lui adjoindre un style (rappel de la syntaxe:cursor:url(invisible.cur)).

Commentaire de pylane22 le 27/06/2008 15:38:50

superbe cette loupe !!
du bon boulot :)

par contre, je n'arrive pas à déplacer "le tout", pour que l'image soit autre part que en haut à gauche de la page, je fais comment ?

Commentaire de pylane22 le 27/06/2008 15:39:34

oups, il me semble que le commentaire d'avant répond à ma question.. je vais essayer pour voir ;)

Commentaire de pylane22 le 27/06/2008 15:45:09

non, décidemment, je n'y arrive pas du tout :'(
aidez-moi s'il vous plais...

Commentaire de fabrice0501 le 20/09/2008 14:17:08

bonjour,
je trouve ce mode de zoom très sympa
j'ai voulu le mettre sur mon site en le prenant sur ce lien http://valid.tjp.hu/tjpzoom/index_en.html
il marche très bien sur une page simple mais lorsque je le place à l'interieur d'une div,la souris ne se trouve pas en face la div loupe sur ie. ya t'il un parametre a régler
merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

script de telechargement d'image ? [ par benoitquintard ] je cherche un script qui puisse faire ceci :quand je passe la sourie sur un lien de photo, je ve que une fenetre de telechargement s'ouvre, et me dema agrandir une image sur la même page en survolant une vignette [ par MEXICANINO ] Salut à tous et sutout BONNE ANNEE !!!!Je galere trop, je voudrais sur mon site agrandir une image sur la même page en survolant une vignette"mouseove ne sais pas par où commencer! [ par unpeuperdu ] bonjour à tous, j'ai un problème que j'imagine de débutant mais je ne sais pas par où commencer pour le régler. c'est, je Zoom sur image au passage dur curseur et affichage dans une même fenêtre [ par amewole ] Voici mon problème :Je dois mettre en place un système d'affichage d'un ensemble de photos (vignettes) rangé dans un tableau html et qui s'affiche une Zoom sur une image en temps réel [ par EnaelHoly ] Salut à tousVoila en fait je me prend la tête sur une broutille certainement. Mon problème c'est que j'aimerai faire un zoom progressif sur une image Zoom sous Netscape? [ par kimuz ] BonjourPourquoi ce script ne fonctionne pas sous Netscape? <script language="javascript"><!--<FONT color=#0080 Chargement et redimentionnement image [ par maxinfos ] Bonjour, je suis actuellement en train de faire une page web dans laquelle je met des photos de petites tailles et que lorsque l'on clique dessus, ouv Redimention image [ par maxinfos ] Bonjour, voilà, j'ai un petit soucis sur le redimentionnement d'une image en fonction de la résolution de l'écran.En fait, mon script f probleme d'album photo [ par christclamard ] bonjour je suis christ et j'aimerais creer un album photo sur mon site internet. le probleme est que j'aimerais afficher 12 photo en sur 4 ligne a ra Découpage d'une image [ par ecoll_manu ] bonjour à tousvoilà ce n'est pas aisé ce que je souhaite faire, mais je ne vois pas d'autre solution pour le faire.Je vous explique ce