1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

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

1 2
Réponse 1 / 24
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
 124
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>
Réponse 2 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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  
Réponse 3 / 24
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 ?
Réponse 4 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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 
Réponse 5 / 24
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.
Réponse 6 / 24
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>
Réponse 7 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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 
Réponse 8 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
il faut lire :
style="position.absolute;top:0px;left:0px";
ton_image.style.left=horizontal+"px";
CordialementBu
Réponse 9 / 24
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 ?
Réponse 10 / 24
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>
Réponse 11 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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
Réponse 12 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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 
Réponse 13 / 24
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 !!!!!
Réponse 14 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
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
Réponse 15 / 24
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 33
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 !
Réponse 16 / 24
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.
Réponse 17 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
ben crotte de biques !
on ne t'as pas donné la réponse ?
CordialementBu
Réponse 18 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
<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
Réponse 19 / 24
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
j'aimerais bien voir où nous nous sommes moqué de toi !
CordialementBu
Réponse 20 / 24
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
 124
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.
Répondre Posez votre question