begin process at 2012 02 12 13:17:19
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS !

LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS !


 Information sur la source

Note :
9,18 / 10 - par 11 personnes
9,18 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :62 379 / 5 436
Auteur : adelami

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (29)
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
Po ur 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

A delami - www.harisa.tk - cooloupastoday@hotmail.com

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

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

Source avec Zip Source avec une capture EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...
Source avec Zip Source avec une capture ALBUM PHOTOS "3D"
Source avec Zip Source avec une capture MANÈGE 3D
Toutes les sources de adelami

 Sources de la même categorie

Source avec Zip Source avec une capture POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE... par phidelum
SFR WIDGET ET JQUERY par hhoareau
Source avec Zip JOLIE ALERTE AVEC "ALERT()" par heycraft
Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon
Toutes les sources de la catégorie Fenêtre & Pop-up

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Source avec Zip Source avec une capture AFFICHAGE D'IMAGE par kazma
Source avec Zip Source avec une capture ZOOM SUR IMAGE A LA SOURIS par kazma
Source avec Zip ZOOM SUR UNE IMAGE par neolien

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"><!--
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;
}
//--></script>
</HEAD>
<BODY onmousemove="document_onmousemove(event);">&#65279;
<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);">&#65279;'
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);">&#65279;'
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"><!--
var zoom, largeur, hauteur,carre;
function reglages(){

//-- Facteur de zoom ---
zoom=2.5;
//-- Taille de l'image initiale --
largeur=400;
hauteur=600;
//-- taille du carré de la loupe EN PIXELS--
carre=250;

//------------------------------------------
document.getElementById("initiale").width=largeur;
document.getElementById("initiale").height=hauteur;
document.getElementById("div1").style.width=carre;
document.getElementById("div1").style.height=carre;
document.getElementById("img1").height=zoom*hauteur;
document.getElementById("img1").width=zoom*largeur;

}
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("img1").style.top=(-(y)*zoom)+(carre/2);
document.getElementById("img1").style.left=(-(x)*zoom)+(carre/2);
}
//--></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 administrateur CS 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 administrateur CS

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

Commentaire de lezouave33 le 09/12/2010 16:59:34 9/10

Salut,

et si on a plusieurs images ?

J'ai essayé de doubler le script en changeant div1 et img1 en div2 et img2
mais ça ne fonctionne pas.

Le pire ?
C'est que j'ai un flip jquery (des pages qui tournent quand on clique dessus)
et que j'aimerais qu'il y cet effet loupe sur chaque image...

Mais il y a un conflit d'ID.

Alors première question si on a plus d'une image comment fait on ?
Et enfin comment rendre ce script compatible à un autre utilisant déjà des ID
dans les balises img et div ?

Merci d'avance aux génies qui sauront répondre !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Zoom genre loupe sur image [ par Annadrill ] Bonjour, voilà, j'essaie de réaliser quelque chose de ce genre http://www.magictoolbox.com/magicmagnify/ mais je ne sais pas par ou commencer, m'y co Faire un zoom d'image a l'endroit du curseur [ par YanDerS ] Je cherche depuis un bout de temps a faire un zoom sur une image a l'endroit du curseur avec la roulette de la sourie mon code actuellement me permet Agrandir une photo à partir d'une vignette sur la même page [ par mquisuisje ] Bonjour et bravo à l'aide qu'apporte ce site..C'est la 1ère fois que je pose une question sur ce site mais je le parcours de temps en temps. Mon amie Dimension Image Javascript [ par benStNarsRepresent ] Bonjour Mon problème est le suivant, j'ai un script (java script) qui exécute la fonctions displayPics avec la commande window.onload = displayPics; Ouvrir une image à partir d'une zone cliquable avec un effet de zoom? [ par bahh66 ] Bonjour, je pose cette question ici mais je ne suis pas sur d'être au bon endroit... Je dois réaliser un cd-rom pour une présentation de musée. J'ai Zoom image [ par etu54 ] Bonjour, De par mes études je suis dans la programmation web depuis 1 an environ. Cependant le javascript m'est encore assez inconnu mis a part les Image SVG coupée lors d'un zoom [ par Pitus38 ] Bonjour à tous, J'ai un petit soucis avec mon image SVG, je gère la fonction mousewheel pour agrandir et réduire en zoomant et dézoomant avec la mole pb sur l'utilisation d'un script zoom+loupe sur image [ par ScriWeb ] Bonjour à tous, Je ne connais pas la javascript et j'ai tenté d'utilisé un script pour avoir un effet loupe sur une image : http://www.javascriptfr.c Resize du contenu en fonction du background. [ par 90max ] Bonjour à tous, Pour mon site, j'aimerais travailler avec une photo en background. Cette photo doit faire 100% de l'écran, chose faite grâce au plugi Javascript: Zoom avec mini image [ par belllangelo ] Bonjour, Je souhaiterai pouvoir reproduire l'effet de zoom avec mini image proposé à cette adresse: http://www.dakkadakka.com/core/gallery-viewimage.


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Single Large Rock Formation in Monument Valley
Photo Framed Landscape Image of Monument Valley 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,092 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)