Faire un zoom d'image a l'endroit du curseur [Résolu]
YanDerS
- Messages postés
- 9
- Date d'inscription
- samedi 13 juin 2009
- Statut
- Membre
- Dernière intervention
- 25 août 2009
- Messages postés
- 9
- Date d'inscription
- samedi 13 juin 2009
- Statut
- Membre
- Dernière intervention
- 25 août 2009
A voir également:
- Javascript zoom
- Deplacement et zoom d'image - Codes sources - Visual Basic / VB.NET (Graphique)
- Flash : Loupe, zoom sur image - CodeS SourceS - Guide
- Effect zoom sur image / gestion des calque - Codes sources - Flash (Effets d'images)
- Javascript : Effet d'ouverture par zoom d'image - CodeS SourceS - Guide
- Vb2005 zoom-déplacement image - Codes sources - Visual Basic / VB.NET (Graphique)
16 réponses
Meilleure réponse
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Statut
- Membre
- Dernière intervention
- 2 février 2015
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
vous devriez savoir adapter
sinon : souris&s=javascriptfr.com regardez donc ici
Cordialement
>>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
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
200 internautes nous ont dit merci ce mois-ci
- Messages postés
- 9
- Date d'inscription
- samedi 13 juin 2009
- Statut
- Membre
- Dernière intervention
- 25 août 2009
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 :
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!
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!
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Statut
- Membre
- Dernière intervention
- 2 février 2015
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....
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....
- Messages postés
- 9
- Date d'inscription
- samedi 13 juin 2009
- Statut
- Membre
- Dernière intervention
- 25 août 2009
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!
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!
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Statut
- Membre
- Dernière intervention
- 2 février 2015
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.
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.
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Statut
- Membre
- Dernière intervention
- 2 février 2015
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"...
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"...
- Messages postés
- 9
- Date d'inscription
- samedi 13 juin 2009
- Statut
- Membre
- Dernière intervention
- 25 août 2009
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 :
Quelq'un peux m'aider SVP
Merci .
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 .