Obtenir les coordonnées de plusieurs images après un onclick type button [Résolu]

Signaler
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010
-
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010
-
Bonsoir à tous,

voila j'ai un petit problème et j'espère que quelqu'un sur ce forum pourra m'aider. Je voudrais donc faire un script qui me permettrait, par pression d'un bouton type " afficher les coordonnées des divs " , d'obtenir dans un autre div et pour chaque div de la page le nom de celui-ci ainsi que ses coordonnées X ( par rapport au left de la page) et Y ( par rapport au top de la page). Cela pourra se présenter comme suit par exemple

Bouton " Afficher les coordonnées de TOUTES les Divs"
                                         | |
                                         \/
(Div affichage des résutats)

Element 1 : (Div 1 avec pour id=element1)
X1 = 50 px
Y1 = 200 px
Element 2 : (Div 2 avec pour id=elemen2)
X2 = 200 px
Y2 = 300 px
Elemen 3 ETC ....

Je bloqué, je pense qu'il faut donnée des id du type id=element1, element 2 etc ... pour me permettre d'utiliser la fonction while ensuite et que cela affiche à la suite l'ensemble des données ( à savoir nom de l'id, X et Y pour chaque div)

Pouvez vous m'orienter et me donner de pistes à savoir qu'il faudrait que cela soit automatique cad avec je pense la fonction while car il s'agira d'utiliser des 10 et des 10 des div différentes ...

Merci pour vos début de piste si vous en avez ...

PAz

10 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
au moins deux choses

document.write
- la méthode write de l'objet document, lorsque celui ci est complet, provoque
l'effacement complet du document existant...

var Objet =
document.getElementById( nom_de_ID)
- dans ta syntaxe tu utilises
des + juste après et avant les l'accolades

document.getElementById(+tab_div[i].id+)
ce qui est incorrecte...

la bonne
syntaxe dans ton cas est
document.getElementById( tab_div[i].id)

enfin pendant que
l'on y est
offsetTop et offsetLeft n'existe pas en tant que tel il faut
qu'il soit relié à un objet, relis bien ce qu'a écrit kazma

;O)
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
102
bonjour

pour connaitre la positiond'un div c'est tous simple

document.getElementById('nomdemondiv').offsetLeft
document.getElementById('nomdemondiv').offsettop

ensuite pour son nom c'est moin evident  on peut utilise ( this ) qui veut parler de l'element courant
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010

bonjour kazma,

mais pour afficher ces valeurs je fait donc :

<script>
function affichage()
{
document.getElementById('id1').innerHTML='X='+offsetLeft+'
\n'+'Y='+offsetTop+'
\n';
}
</script>
et dans le HTML :

// pour les divs, j'en met deux mais le but étant d'en avoir des "centaines"

// pour le bouton de validation

pour le moment j'en suis là, cela ne fonctionne pas, par contre si je fait :


<script>

function affichage()

{

document.getElementById('affichage').innerHTML='X='+offsetLeft+'
\n'+'Y='+offsetTop+'
\n';

}

</script>
 avec un div dans le HTML :

cela fonctionne, cela me met les coordonnées X et Y d'un des divs dans un div affichage. Seul problème ce que je souhaiterai obtenir les coordonnées de tous les divs et leur nom pour savoir à quel div les coordonnées correspondent.

Suis-je déjà dans une bonne direction ?

merci
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
102
je te conseille c'est de faire un array dans lequel tu liste tout tes id et ensuite tu cree une fonction qui parcour le tableau tu met tous ca dans une variable que tu affiche en fin de script
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
102
le script resemblera a ca

<script type="text/javascript">
function blabla(){
var tout=''

tbid=["id1","id2","id4","id5","id6"]
for (i=0; i<tbid.length+1; i++) {
tout=tout+tbid[i]+'=X='+document.getElementById(tbid[i])offsetLeft+'Y='+document.getElementById(tbid[i])offsetTop
}
alert(tout)
}
</script>

je ne l'ai pas essayer
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Afficher les coordonnées de TOUTES les
Divs</td>
</td></tr></tbody></table>pour les
coordonées kazma t'en a parlé...

pour tous les DIV, il te suffit d'utiliser la
méthode getElementsByTagName sur le document.body, elle te retournera un tableau
d'objet, à toi de tester si cela correspond à ce que tu veux et dans ce cas
récupéres les informations qui t'intéresses.
;O)
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010

merci petoleTeam mais je n'arrive qu'à afficher que l'id du premier div.

pour le moment j'essai de faire apparaitre le nom des divs, ensuite je verrai pour faire apparaitre leurs positions top et left respective. Je voudrais pour cela utiliser les boucles avec un code court qui retourne les données pour chaques div .... mais j'y arrive pas ... :(

voila mon ti bout de code.

<html>
<head>
<script type="text/javascript">
function affichage()

{
  var tab_div=document.getElementsByTagName('div');
for (var i=0;i<tab_div.length;i++)(
  document.write(tab_div[i].id));
 } 
 

 

</script>
</head>

ESSAI



</html>
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010

pourtant si je fais un :

alert(tab_div[i].id);

ben ca marche nickel mais sa m'ouvre la popup d'alerte ....
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010

ayez, donc pour ce qui est d'afficher a la suite tous les id pas de problème, maintenant je passe à l'affichage des coordonnées Top et Left de chaque div correspondant à son id : Et la je rebloque, cela m'affiche le premier id " id1" et ca bloque je ne sais pas pourquoi, peutêter y a t'il une erreur dans mon code ? Je suis débutant en Javascript alors si quelqu'un arrive à me dépatouiller de là je serais ravi.
voici le code

<html>
<head>
<script type="text/javascript">
function affichage()

{
var tab_div=document.body.getElementsByTagName('div');

for (i=0;i<7;i++){

document.write("ligne numéro "+tab_div[i].id+"
");
document.getElementById(+tab_div[i].id+).innerHTML='X='+offsetTop+'
\n'+'Y='+offsetLeft+'
'; // C'est là que ca bloque ...


 }

 

</script>
</head>

ESSAI

ESSAI3

ESSAI4

ESSAI5

ESSAI6grhtjykiuj



</html>

Merci pour votre aide ...
PAz
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010

Merci petole team et kazma, ca fonctionne nikel.