begin process at 2012 05 29 06:03:03
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Faire un zoom d'image a l'endroit du curseur


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Faire un zoom d'image a l'endroit du curseur

mercredi 22 juillet 2009 à 09:47:29 | Faire un zoom d'image a l'endroit du curseur

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 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!

mercredi 22 juillet 2009 à 10:28:56 | Re : Faire un zoom d'image a l'endroit du curseur

Bul3

Membre Club
Réponse acceptée !


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>
<body>
<div style="width:100%;height:600px;background-color:#FFFFAA;"
id="iddv">.</div>
<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>
</body>
</html>



vous devriez savoir adapter

sinon : regardez donc ici

Cordialement [mon Site] [M'écrire] Bul

mercredi 22 juillet 2009 à 11:01:02 | Re : Faire un zoom d'image a l'endroit du curseur

YanDerS

Merci pour le code je vais le tester je vous tiendrai au courant :)

mercredi 22 juillet 2009 à 11:59:25 | Re : Faire un zoom d'image a l'endroit du curseur

YanDerS

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 :

Code Python :

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!

mercredi 22 juillet 2009 à 12:31:15 | Re : Faire un zoom d'image a l'endroit du curseur

Bul3

Membre Club


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....


mercredi 22 juillet 2009 à 13:18:55 | Re : Faire un zoom d'image a l'endroit du curseur

YanDerS

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!

mercredi 22 juillet 2009 à 13:34:28 | Re : Faire un zoom d'image a l'endroit du curseur

Bul3

Membre Club


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.

mercredi 22 juillet 2009 à 14:01:52 | Re : Faire un zoom d'image a l'endroit du curseur

YanDerS

OK Merci bcp pr votre aide je pense avoir tous ce que je voulais :)

mercredi 22 juillet 2009 à 14:11:09 | Re : Faire un zoom d'image a l'endroit du curseur

Bul3

Membre Club

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" )

mercredi 22 juillet 2009 à 14:58:17 | Re : Faire un zoom d'image a l'endroit du curseur

YanDerS

Ç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('<img src="Chemin de l'image" id="module" style="height:'+zoom+'px;">');

avec zoom=500;


1 2

Cette discussion est classée dans : code, image, curseur, zoom, endroit


Répondre à ce message

Sujets en rapport avec ce message

Galerie Jquery et Zoom, besoin d'aide pour finaliser code [ par Annadrill ] Bonjour, j'ai une page créé en php ou j'ai plusieurs petites images et une grande image et lorsque je clique sur une des petites images cela me char incompatibilité d'un code javascript pour firefox et IE8 [ par chmidou ] Bonjour, j'ai récupéré un code et je l'ai adapté à mes besoins seulement, ça ne marche que sur chrome. voici, le code en question veuillez m'aidez. Bouton pour zoomer une image [ par Capharnaum ] Bonjour, Je souhaiterai créer dans ma page web un bouton qui permette de zoomer une image chargée. Voilà ce que j'ai actuellement dans ces fonctions, script de defilement d'image [ par sidomed ] étant novice dans le javascript, je cherche à faire défiler des image qui sont stocké dans un dossier min et au méme temps dans une base de donnée l'i 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 Comment modifier les paramètres vidéos ? [ par hellotk ] Bonjour à tous, Étant novice en javascript, j'ai une question concernant la modification de paramètres vidéos; j'utilise pour mon site un lightbox en Javascript : Affichage d'une image dans une div [ par silver ] Bonjour, Le bout de code javascript suivant est issu d'un script utilisé pour un chat instantané. Actuellement, le chat affiche en instantané le nom ajouter du code javascript a une page asp.net [ par koukou6311 ] Salut tous le monde voilà,  je suis tombé sur ce code en javascript pour l'animation des images et j'ai essayé de l'implementer dans mon site sur visu image de fond [ par debutant VB ] J'aimerai afficher une image de fond sans utiliser la propriété bgcolor de pour plus de possibilités. J'ai fait ce code qui fonctionnait avec FrontPag Salut a tous : activer desactiver balise href [ par Strasha ] Tout est dans le titre Je dispose d'un script qui me donne un zoom sur image.Probleme a chaque fois que je clique sur l'image il m'ouvre un nouveau


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
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 : 0,983 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales