Déplacer une image en cliquant sur la page [Résolu]

Signaler
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011
-
 cs_biloute54 -
Bonjour a tous,
je cherche un code qui permet de déplacer une image en cliquant sur la page et que celle-ci vient à la position du curseur.
Je ne veux pas que l'image suivent la souris, ni devoir cliquer sur l'image pour la déplacer. Merci d'avance pour votre aide précieuse.

24 réponses

Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
bonjour
petit script que j'ai fait il y a longtemp attention ne marche qu'avec IE

<html>
<head>
<TITLE></TITLE>

<SCRIPT>
function deplace(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX
document.getElementById('oxo').style.top=igrec+'px';
document.getElementById('oxo').style.left=ixe+'px';
}
 </SCRIPT>
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
bonjour,
extrèmement qimple à faire.
onclick sur la page ==> récupération des coordonnées de la souris,
qu'on répercute à celles de l'image.
Cordialement     Bul  
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

Merci pour l'info, aurais tu un exemple de code ?
Il faut deux fonctions ? une pour récupérer la position du curseur et une seconde pour appliquer la position a la souris c'est ça ?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
un exemple ? te faire le code quoi !
et le tien ? qu'est-ce qui plante ? que n'arrives-tu pas à faire ?
mets le nous, on t'aidera à mettre au point.
1 seule fonction ( moins de 10 lignes ) suffira
Cordialement   Bul 
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

je galere, j'arrive a recuperer les coordonnees de la souris mais pas à les appliquer  à l'image.
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

<html><head>
<script type="text/javascript">
function onclick_page(event)
{
  var x = event.clientX;
  var y = event.clientY;
</script>
</head>

</html>
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
déjà c'est exclusif IE, ça ne fonctionnera pas avec FF
( mais on verra cela après si tu veux ).

et ton image ? elle est où ?
elle poosède un style="position.absoulte;top:0px;left:0px";
"il suffit" de mettre à jour ton_image.styleleft=horizontal+"px";
                                   et ton_image.style.top=vertical+"px";

Cordialement   Bul 
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
il faut lire :
style="position.absolute;top:0px;left:0px";
ton_image.style.left=horizontal+"px";
CordialementBu
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

Désolé, jai donc ça :

<html><head>
<script type="text/javascript">
function onclick_page(event)
{
  var x = event.clientX;
  var y = event.clientY;
  personnage.style.top = vertical+"px";
  personnage.style.left = horizontal+"px";
</script></head>

</html>

Ne faut t'il pas mettre l'image dans une div ?
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

merci pour ce code mais je comprend pas pourquoi le mien ne fonctionne pas :
<html><head>
<script type="text/javascript">
function onclick_page(event)
{
  var y = window.event.offsetY;
  var x = window.event.offsetX; 
document.getElementById('personnage').style.top=y+'px';
document.getElementById('personnage').style.left=x+'px';
</script></head>

</html>
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
quelques imprécisions :
...
    document.getElementById('personnage').style.left= x+'px';
}
...        style ="position:absolute; top:0px; left:0px" id="personnage">

te donner un truc tout cuit ne t'apprend rien en fait....

CordialementBu
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
il restera à assurer la compatibilité avec FireFox
regarder du coté de event.pageX; et event.pageY; où là le event passé
en paramètre à la fonction servira, alors qu'avec IE il est inutile.
Cordialement     Bul 
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

Je suis débutant, merci de votre compréhension !!!!!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
et pourquoi tu cries ?
tu as une solution  non ?
reste à adapter pour FF, je t'ai donné ce qu'il faut,
fais et si ça ne marche pas, reviens.
on ne t'a pas aidé ?  ça ne marche pas ?
où en es-tu ? qu'est-ce qui plante ? ....
CordialementBu
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
30
Salut,

Bultez et kazma t'ont donné une solution non ?

Alors pourquoi tu crie ?

Si tu es débutant ça ne change rien...

ça me fait rire, a chaque fois que quelqun pose une question il dit je suis débutant parce qu'il pense avoir un traitement de faveur....

ETRE DEBUTANT NE CHANGE RIEN AU TRAITEMENT DE TA QUESTION...

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
168
Date d'inscription
dimanche 26 février 2006
Statut
Membre
Dernière intervention
30 septembre 2011

je crie car j'ai l'impression qu'on se moque de moi.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
ben crotte de biques !
on ne t'as pas donné la réponse ?
CordialementBu
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
<html>
<head>
<script type= "text/javascript">
function onclick_page(event)
{
  var y = window.event.offsetY;
  var x = window.event.offsetX; 
document.getElementById('personnage').style.top=y+'px';
document.getElementById('personnage').style.left=x+'px';
}
</script></head>

:absolute; top:0px; left:0px" id ="personnage">

</html>CordialementBu
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
j'aimerais bien voir où nous nous sommes moqué de toi !
CordialementBu
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
personne ne se moque de toi ce que bultez cherche a faire c'est t'expliquer pour que tu puisse comprendre mais il considere que tu doit faire un minimum d' efforts car il arrive souvent sur le forum que des personnes demandes qu'on leurs fasse tout le travaille.
et sinon j'avoue que tu a fait des efforts et que tu t'est pas trop mal debrouille.
pour finir bultez aide beaucoup les gens sur le forum.