Obtenir les coordonnées de plusieurs images après un onclick type button

Résolu
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010 - 22 janv. 2009 à 00:14
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010 - 27 janv. 2009 à 10:41
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

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
26 janv. 2009 à 17:02
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)
3
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
22 janv. 2009 à 09:19
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
0
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010
22 janv. 2009 à 09:32
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
0
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
22 janv. 2009 à 11:32
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
22 janv. 2009 à 11:52
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
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
22 janv. 2009 à 18:18
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)
0
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010
25 janv. 2009 à 22:49
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>
0
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010
25 janv. 2009 à 22:54
pourtant si je fais un :

alert(tab_div[i].id);

ben ca marche nickel mais sa m'ouvre la popup d'alerte ....
0
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010
26 janv. 2009 à 00:56
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
0
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010
27 janv. 2009 à 10:41
Merci petole team et kazma, ca fonctionne nikel.
0