Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Javascript] Coordonnées dans une <div>

julkien

Par julkien
dans Programmation

 Partager

Messages recommandés

julkien Full Patch Member

julkien

Posté(e)
Posté(e) (modifié)

Bonjour tous le monde les gens, Bonjour Kewlcat

 

J'aimerais trouvé un script en Js (ou un exemple de script) de préférence, capable de me prendre les coordonnées dans une div.

 

Pour faire simple, j'ai une div id="image1", qui contient une image de 80px X 480px, et je voudrais que du coin supérieur gauche de cette div (et non de la page) j'ai le point x=0 et y=0, afin que si je clique quelque part dans cette div, j'obtiens l'emplacement exacte du pixel, mais que pour cette div.

 

J'ai bien trouvé moult exemple sur google, mais aucun qui traite que d'une div, tous en général font le point 0, 0 au coin haut gauche de la page et non de la div.

 

J'aurais ensuite besoin de remettre ses valeurs dans un input, mais bon, si déjà je peux les afficher dans une petite div en dessous de l'autre, sa serais le grand luxe.

 

Je ne pige absolument pratiquement rien au javascript, alors je remercie par avance tous ceux qui auront ou trouveront un exemple concret (et surtout facile à comprendre pour un ptit gars comme moi).

 

Cordialement,

Modifié par julkien

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Si tu connais les coordonnées absolues X0 et Y0 du coin haut gauche de ton bloc <div> dans la page, prends n'importe quel script (par exemple celui-ci) et effectue les soustractions, tout simplement : dans le script, tu remplaces juste avant affichage X par X-X0 et Y par Y-Y0. Attention, cela ne marchera que s'il n'y a pas de débordement de page (pas de scroll).

 

Sinon, tu peux par exemple t'inspirer de ce « labo » de KewlCat. Tu définis deux <div>, qui te fournissent chacune les coordonnées de son coin haut gauche, respectivement X1 et Y1, X2 et Y2. La première <div> peut être fixe, mais la seconde est mobile et, pour le « pointage », il suffit que son contenu soit en forme de flèche (sur fond transparent) dont la pointe est positionnée à son coin haut gauche. Et tu affiches X2-X1 et Y2-Y1, les valeurs que tu cherches !

 

Et puis il y a certainement des tas d'autres solutions :P

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Si la div "conteneur" est en position "relative" alors les éléments placés dedans (ou les coordonnées renvoyées pour le curseur de souris) auront comme point d'origine le coin supérieur gauche de cette div et non celui du body du document.

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Tiens, juste pour le plaisir, j'ai adapté la page « Exemple-CSS » de KewlCat :P

 

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Pointeur de position</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- Adaptation de la page © KewlCat
    [url="http://kewlcat.no-ip.org/tests/exemple-css.html"]http://kewlcat.no-ip.org/tests/exemple-css.html[/url] -->
<style type="text/css">
#boximage {
 position: relative;
 color: inherit;
 background-color: white;
 width:320px;
 height:269px;
 margin: 1em;
}
#curseur {
 position: absolute;
 z-index: 0;
 cursor: hand;
 top: 0;
 left:0;
 width:120px;
 height:21px;
 padding-top:3px;
 padding-left:20px;
 font-size: 10px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background:url(http://moe.mabul.org/up/moe/2010/01/13/img-1907565mki0.gif) no-repeat;
}
</style>
<title>Page de tests CSS</title>
<script type="text/javascript"> <!--
var defaultStatus = "Bienvenue sur ma page de tests.";
var xMousePos = 0; // Horizontal position of the mouse on the screen
var yMousePos = 0; // Vertical position of the mouse on the screen
var xMousePosMax = 0; // Width of the page
var yMousePosMax = 0; // Height of the page
var topOffset = 0;
var leftOffset = 0;
var isMouseDown = false;
var isBeingMoved = null;
function majTexte() {
 blabla = "x=" + document.getElementById("curseur").style.left + ", y=" + document.getElementById("curseur").style.top;
 document.getElementById("curseur").innerHTML = blabla;
}
function captureMousePosition(e) {
 if (document.all) {
   xMousePos = window.event.x+document.body.scrollLeft;
   yMousePos = window.event.y+document.body.scrollTop;
   xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
   yMousePosMax = document.body.clientHeight+document.body.scrollTop;
 } else if (document.getElementById) {
   xMousePos = e.pageX;
   yMousePos = e.pageY;
   xMousePosMax = window.innerWidth + window.pageXOffset;
   yMousePosMax = window.innerHeight + window.pageYOffset;
 }
 if (isBeingMoved != null) {
   isBeingMoved.style.top = "" + yMousePos - (topOffset ? topOffset : 6) + "px";
   isBeingMoved.style.left = "" + xMousePos - (leftOffset ? leftOffset : 50) + "px";
   if (topOffset > yMousePos) {
       isBeingMoved.style.top = 0;
   }
   if (leftOffset > xMousePos) {
       isBeingMoved.style.left = 0;
   }
   window.status = " x:" + (xMousePos - leftOffset) + " y:" + (yMousePos - topOffset);
 }
 majTexte();
}
function raiseMove(id) {
 document.getElementById('curseur').style.zIndex = 0;
 id.style.zIndex = 1;
 isBeingMoved = id;
 topOffset = yMousePos - parseInt(isBeingMoved.style.top);
 leftOffset = xMousePos - parseInt(isBeingMoved.style.left);
}
function init() {
 for (i = 0 ; i < document.styleSheets.item(0).cssRules.length ; i++) {
   regle = document.styleSheets.item(0).cssRules.item(i);
   if ((regle.type == 1) && (regle.selectorText == "#curseur")) {
     id = document.getElementById("curseur");
     id.style.left = regle.style.left;
     id.style.top = regle.style.top;
     id.style.width = regle.style.width;
     id.style.height = regle.style.height;
   }
 }
}
// -->
</script>
</head>
<body onload="window.status = defaultStatus; document.onmousemove = captureMousePosition; init(); majTexte();">
 <div id="boximage">
   <img src="http://img108.imageshack.us/img108/893/bagheera20cartoonjh0.jpg">
   <div id="curseur"
    onmouseover="java script:{ this.style.backgroundColor='white'; }"
    onmouseout="java script: { this.style.backgroundColor='transparent'; }"
    onmousedown="java script:{ raiseMove(document.getElementById('curseur')); return false; }"
    onmouseup="java script:  { isBeingMoved = null; window.status = defaultStatus; }">
   </div>
 </div>
</body>
</html>

Avec le curseur img-214426kpm6e.gif tu déplaces la flèche img-214335euwae.gif dont les coordonnées de la pointe apparaissent à sa droite ! :P

Ça marche impeccable sous FireFox, et ça marche aussi sous Internet Explorer…

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...