Faire un zoom d'image a l'endroit du curseur [Résolu]

YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 09:47 - Dernière réponse : YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention
- 25 août 2009 à 14:47
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 de faire le zoom mais qu'au centre de l'image rien de plus.
je veux ajouté des ligne de code qui me permettent de détecter la position du curseur sur l'image et de zoomer sur cet endroit.
Voici mon code actuel:

Si quelqu'un peux m'aider SVP (Je suis débutant en Java-script )
Merci!
Afficher la suite 

Votre réponse

16 réponses

Meilleure réponse
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 10:28
3
Merci
Bonjour,

>>Voici mon code actuel:
rien vu sur ce coup là !?!

détecter la positon du curseur ?
ch'tiot exemple qui donne la position sur la page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


.

<script type="text/javascript">
function Deplace( evt )
{ var posCur={ "x":0, "y":0 };
if ( window.event )
{ posCur.x=window.event.x+document.body.scrollLeft;
posCur.y=window.event.y+document.body.scrollTop;
}
else { posCur.x=evt.pageX;
posCur.y=evt.pageY;
}
return posCur;
}
document.body.onmousemove=function(event)
{ var p=Deplace( event );
document.getElementById("iddv").innerHTML="X:"+p.x+" / Y:"+p.y;
};

</script>

</html>


vous devriez savoir adapter

sinon : souris&s=javascriptfr.com regardez donc ici

Cordialement

Merci Bul3 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 93 internautes ce mois-ci

Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 11:01
0
Merci
Merci pour le code je vais le tester je vous tiendrai au courant :)
Commenter la réponse de YanDerS
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 11:59
0
Merci
J'ai testé votre code est j'ai vu que la fonction "deplace" récupère bien la position du curseur mais j'ai un problème c'est j'ai une fonction "zoomer" dont le code est :

function zoomer(zoomx,min) 
{ 
if(document.getElementById) 
{ 
zoom *= zoomx;

if (zoom<min){zoom=min}	  document.getElementById("module").style.height=zoom+'px';
      
  } 
} 


C'est dans cette fonction ou je veux traiter les coordonnes récupérés par la focntion "deplace" comment se passe le passage de paramètre d'un pointeur en Javascript?

Merci encore pour votre réponse!
Commenter la réponse de YanDerS
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 12:31
0
Merci
là de toutes manières,dans la fonction,
vous ne faites que modifier la hauteur ???

>>comment se passe le passage de paramètre d'un pointeur

pointeur ? ça n'existe pas réellement en javascript

vous passer déjà 2 paramètres : function zoomer(zoomx,min)
ajoutez ceux que vous voulez
function zoomer( zoomx, min, X, Y, ..... )
on peut, bien entendu, passer un array, un object....
Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 13:18
0
Merci
Oui je modifie la hauteur de l'image.
Désolé je me suis mal exprimé je voulais dire le passage d'une structure "posCur"! est ce que c'est comme toutes les autres variables?
car j'ai essayé dans la fonction "zoomer" de lancer la fonction "deplace" tout en récupérant le return dans une variable interne a la fonction "deplace" mais quand je fait un "ALERT" pour vérifier si je récupérer bien les deux coordonnées,malheureusement ca ne marche pas!
Commenter la réponse de YanDerS
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 13:34
0
Merci
ben oui.

je disais on peut passer un array, un object....

pour cet exemple :

remplacez
document.getElementById("iddv").innerHTML="X:"+p.x+" / Y:"+p.y;
par :
affiche(p);
et ajouter
function affiche(quoi)
{ document.getElementById("iddv").innerHTML="X:"+quoi.x+" / Y:"+quoi.y;
}

on transmet bien à une fonction.
Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 14:01
0
Merci
OK Merci bcp pr votre aide je pense avoir tous ce que je voulais :)
Commenter la réponse de YanDerS
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 14:11
0
Merci
nickel si ça baigne

j'avais simplement un doute
>>faire un zoom sur une image à l'endroit du curseur
or dans la fonction, seul le "zoom" est fait
si le but c'est de mettre l'image zoomée
là où est le curseur, il faudra jouer avec
style.top et style.left
( si style="position:absolute" )
Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 14:58
0
Merci
Ça marche nickel je transmet bien les coordonnés à la fonction zoom , et je comptai reprendre le traitement mais est ce que style doit obligatoirement style="position:absolute" ?
car moi j'ai :
document.write('');

avec zoom=500;
Commenter la réponse de YanDerS
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 15:11
0
Merci
faut éviter les document.write

si c'est exécuté lorsque la page a
été totalement interprétée ( c'est
le cas dans une fonction appelée lors
d'un click par exemple ), la page
est totalement effacée, y compris
le javascript

mettre l'image "en dur" !

on peut jouer avec
style.display="none" | inline,
style.top=position verticale+"px"
style.top=position horizontale+"px"
style.height=hauteur+"px"...
Commenter la réponse de Bul3
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 15:13
0
Merci
il fallait lire :

var i=doculment.getElementById("module");
i.style.display="none" | "inline"
i.style.top=position verticale+"px"
i.style.left=position horizontale+"px"
i.style.height=hauteur+"px"...
Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 15:19
0
Merci
i.style.display="none" | "inline"

ca permet de faire quoi ?

(Je suis désolé mais c'est mon premier prog en javascript je suis désolé si je pause des question de base :s)
Commenter la réponse de YanDerS
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 15:30
0
Merci
faut essayer ! ;o))
mais bon,
display="none" = cacher
display="inline" montrer l'élément
Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 22 juil. 2009 à 16:11
0
Merci
Merci bcccp ! ^^
Commenter la réponse de YanDerS
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 22 juil. 2009 à 16:16
0
Merci
il vous en prie.
Commenter la réponse de Bul3
YanDerS 9 Messages postés samedi 13 juin 2009Date d'inscription 25 août 2009 Dernière intervention - 25 août 2009 à 14:47
0
Merci
bonjour ,
je reposte car j'ai toujours des difficultés pour faire la fonction de zoom !
Vous m'avais aider a récupérer les coordonné du curseur que j'utilise dans la fonction "Zoomer" qui elle effectue le zoom mais j'ai du mal a coder cette fonction jai fait ca :
function zoomer(zoomx,min,PosCur) 
{ 

if(document.getElementById) 
{ 
zoom *= zoomx;
var X=(PosCur.x-5);
var Y=(PosCur.y-95);

if (zoom <min){zoom=min}
document.getElementById("module").style.height =zoom+'px';

     if ((PosCur.x>10&&PosCur.x<680)&&(PosCur.y>100&&PosCur.y<580))
     {  
               
        if (parseInt(document.getElementById("Box").style.height)<document.getElementById("module").height)
        {                                 
            document.getElementById("module").style.top =((document.getElementById("module").height)/2)-Y/2+'px';            
            if (parseInt(document.getElementById("Box").style.width)<document.getElementById("module").width)
            {
                    document.getElementById("module").style.left =((document.getElementById("module").width)/2)-X/2+'px';
            }             
        }
        
      }else
     {
        if (parseInt(document.getElementById("Box").style.height)<document.getElementById("module").height)
      {
          document.getElementById("module").style.top =(parseInt(document.getElementById("Box").style.height)-document.getElementById("module").height)/2+'px';

          if (parseInt(document.getElementById("Box").style.width)<document.getElementById("module").width)
          {
              document.getElementById("module").style.left =(parseInt(document.getElementById("Box").style.width)-document.getElementById("module").width)/2+'px';
          }
      }
     }
     
  
  } 
} 


Quelq'un peux m'aider SVP
Merci .
Commenter la réponse de YanDerS

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.