LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS !
Utilisateur anonyme
-
3 juil. 2006 à 19:14
rominail Messages postés 30 Date d'inscription vendredi 23 avril 2010 Statut Membre Dernière intervention 3 novembre 2012 - 25 oct. 2012 à 19:09
rominail Messages postés 30 Date d'inscription vendredi 23 avril 2010 Statut Membre Dernière intervention 3 novembre 2012 - 25 oct. 2012 à 19:09
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/38424-loupe-sur-image-au-passage-de-la-souris
https://codes-sources.commentcamarche.net/source/38424-loupe-sur-image-au-passage-de-la-souris
25 oct. 2012 à 19:09
9 déc. 2010 à 16:59
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 !
20 sept. 2008 à 14:17
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
27 juin 2008 à 15:45
aidez-moi s'il vous plais...
27 juin 2008 à 15:39
27 juin 2008 à 15:38
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 ?
31 mai 2008 à 19:51
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)).
30 mai 2008 à 22:56
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)
21 mai 2008 à 03:27
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
9 nov. 2007 à 03:29
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.
25 juil. 2007 à 16:31
21 avril 2007 à 07:46
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>
<center>
</center></HTML>
merci d'avance
14 mars 2007 à 14:51
bravo
28 déc. 2006 à 03:50
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...!
7 oct. 2006 à 17:18
http://www.sesame-ouvre-toi.net
7 oct. 2006 à 10:29
http://valid.tjp.hu/zoom/
6 oct. 2006 à 15:22
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
23 sept. 2006 à 17:02
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 + ''
v = v + ''
v = v + '
'
v = v + ''
v = v + '
'
v = v + '</HTML>'
document.write(v)
document.close()
}
</script>
</head>
</html>
23 sept. 2006 à 13:07
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 + ''
v = v + ''
v = v + '
'
v = v + ''
v = v + '
'
v = v + '</HTML>'
document.write(v)
document.close()
}
</script>
</head>
</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;
}
22 juil. 2006 à 15:10
Sous IE : c'est bon et effectivement extrêmement simple !
Bravo
11 juil. 2006 à 08:57
Chapeau bas !! Adelami,vraiment bo boulot..(10/10)
5 juil. 2006 à 20:38
5 juil. 2006 à 19:49
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.
5 juil. 2006 à 11:27
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
5 juil. 2006 à 10:06
ç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 )
5 juil. 2006 à 09:00
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 ...
4 juil. 2006 à 23:21
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.
4 juil. 2006 à 10:38
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>
</HTML>
pour les autres navigateurs que IE,
il faut un .htm au lieu du .hta.
4 juil. 2006 à 02:18
Explication:
On ne peut pas modifier la grandeur de l'image...
C'est beau quand même continu tes scripts!
DomJ
3 juil. 2006 à 19:14
A vos claviers !