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

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Déplacer une image en cliquant sur la page


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

Déplacer une image en cliquant sur la page

mercredi 27 août 2008 à 18:45:21 | Déplacer une image en cliquant sur la page

loicseg

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.
jeudi 28 août 2008 à 10:11:20 | Re : Déplacer une image en cliquant sur la page

bultez

Membre Club
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   [mon Site] [M'écrire]
jeudi 28 août 2008 à 10:19:00 | Re : Déplacer une image en cliquant sur la page

loicseg

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 ?
jeudi 28 août 2008 à 10:38:46 | Re : Déplacer une image en cliquant sur la page

bultez

Membre Club
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  [mon Site] [M'écrire]
jeudi 28 août 2008 à 10:46:38 | Re : Déplacer une image en cliquant sur la page

loicseg

je galere, j'arrive a recuperer les coordonnees de la souris mais pas à les appliquer  à l'image.
jeudi 28 août 2008 à 10:47:34 | Re : Déplacer une image en cliquant sur la page

loicseg

<html><head>
<script type="text/javascript">
function onclick_page(event)
{
  var x = event.clientX;
  var y = event.clientY;
</script>
</head>
<body onclick="onclick_page(event);">
</body></html>
jeudi 28 août 2008 à 11:01:05 | Re : Déplacer une image en cliquant sur la page

bultez

Membre Club

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  [mon Site] [M'écrire]
jeudi 28 août 2008 à 11:03:09 | Re : Déplacer une image en cliquant sur la page

bultez

Membre Club
il faut lire :
style="position.absolute;top:0px;left:0px";
ton_image.style.left=horizontal+"px";
CordialementBul[mon Site][M'écrire]
jeudi 28 août 2008 à 11:21:04 | Re : Déplacer une image en cliquant sur la page

loicseg

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>
<body onclick="onclick_page(event);">
<p><img border="0" src="perso.gif" style="position.absolute; top:0px; left:0px" id="personnage"></p>
</body></html>

Ne faut t'il pas mettre l'image dans une div ?

jeudi 28 août 2008 à 11:22:51 | Re : Déplacer une image en cliquant sur la page

kazma

Administrateur CodeS-SourceS
Réponse acceptée !
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>
<BODY onclick="deplace()">
<img  src='cal.gif'id="oxo" STYLE="position:absolute;top:0px;left:50px;">

1 2 3

Cette discussion est classée dans : page, image, déplacer, cliquant


Répondre à ce message

Sujets en rapport avec ce message

Changement d'image d'un autre frame [ par NiFF ] Ma page est séparée en 2, et il y a deux frames : je voudrais que lorsque le visiteur clique sur une image de la frame de gauche, elle s'afiche dans u jouer un son en cliquant sur une image [ par fabiin ] SalutComment faut-il faire pour jouer un son lors d'un clique sur une image, un lienmerci de votre aide @+Fabs<img src=/imgs2/smile_cool.gif border=0 double rollover.... [ par clement ] Double Rolloverbonjour a tous.voila mon probleme : a l'origine, 2 images( 1 et 2) sur une page.j'aimerai que qd je passe sur l'image 1 il y ait un rol Insérer une image à partir d'une popup [ par yoyo1 ] Bonjour, Je souhaiterai intégrer une image dans une page à partir d'une liste d'image d'une popup. Je m'explique. Sur une page A j'ai une image "Cliqu Insérer une image selon un résultat mathématique [ par tweeder ] Bonjour,Je m'explique car mon sujet n,est pas très révélateur. Je dois créer une page qui fait des calculs mathématiques et jai pensé insérer des imag Rafraïchir une image [ par jptoo ] Dans une page , j'ai une image à insérer .Cette image à l'adresse A est rafraichie toutes les secondes et porte toujours le même nom CURRENT.JPG .Mon probleme frame et chargement image [ par ministephie ] Bonjour,Je débute en javascipt et j'ai un problème de chargement d'image dans une frame.Bref voici comment il est construit : Une page index.html qui Un SEUL background [ par floflotz ] bonjour à tous,je souhaite mettre une image en background sur mon site. Le problème est que quand j'applique la propriété background à mon body, il mu Sélectionnabilité des éléments d'une page web [ par arnal69130 ] Bonjour à tous,je cherche désèspérement à désactiver la sélectionnabilité d'un élément d'une page web. Plus clairement :par exemple si vous cliquez to image transparente par javascript ? [ par fmazoue ] est il possible de généré des image transparente par javascript^parce que en fait l'autre jour je m'amusai a faire un petit script qui simulait le dép


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

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,842 sec (3)

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