Bonjour à tous,

Je suis actuellement en train de développer un petit script mais je rencontre un léger problème : je dois récupérer la position d'un élément (dans mon cas, c'est une image) et placer dessus un div qui le recouvre complètement. Alors ça marche impeccablement en récupérant les valeurs offsetTop et offsetLeft sauf lorsque l'image se trouve dans un conteneur possédant la propriété de position relative ou absolue... Pour remédier à ce problème, j'insère mon div dans l'élément contenant l'image, ainsi le point de coordonnées 0 leur est commun, mais ça n'est pas une solution car le div que j'ai créé devra par la suite être redimensionné et replacé mais par rapport au coin supérieur gauche de la page HTML.



J'ai bien pensé à quelques moyens mais aucun ne fonctionne correctement .

Merci d'avance,
Nes'

Voila :

var eX = 0;
var eY = 0;
var element = élement dont tu veux récuperer les coordonnées;
do{
	eX += element.offsetLeft;
	eY += element.offsetTop;
	element = element.offsetParent;
} while(element && CSS.GetRealValue(element, 'position') != 'absolute');
if(element){
	eX += element.offsetLeft;
	eY += element.offsetTop;
}

Remarque: j'utilise mon objet CSS pour faire ça mais tu n'as besoin que d'une fonction si tu veux faire plus léger :

GetRealValue: function (element_, propriete_) {
	if (element.currentStyle){
		return element.currentStyle[propriete_];
	} else if (window.getComputedStyle){
		return document.defaultView.getComputedStyle(element, null).getPropertyValue(propriete_);
	}
}

Ta fonction n'est utilisable que pour les éléments positionnés de façon absolue en CSS, Timot. Elle ne permet pas de récupérer la position absolue d'un élément placé simplement dans le flux de la page.
Voici une fonction qui fait cela :

function findPos(obj){
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

Ah mais oui ! Je n'avais pas pensé à la propriété offsetParent ! Eh bien merci à vous deux en tout cas .

Citation : Elias

Ta fonction n'est utilisable que pour les éléments positionnés de façon absolue en CSS, Timot. Elle ne permet pas de récupérer la position absolue d'un élément placé simplement dans le flux de la page.
Voici une fonction qui fait cela :

function findPos(obj){
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

Euh ma fonction est la même que toi, sauf que quand elle rencontre un élement qui est positionné en valeur absolue, et beh elle s'arrete, et on rajoute la valeur du top et du left.
Est ce que ta fonction marche avec des éléments en position absolue ?

Ça tombe bien que tu post une réponse, il se trouve que j'ai un nouveau problème, ça fonctionne partout sauf sur IE (surprenant). J'ai légèrement réadapté la fonction pour mon usage, la voici :

SpeedBox.prototype.realPosition = function(target){
  var top = target.offsetTop;
  var left = target.offsetLeft;
  
  while(target = target.offsetParent) {
    top += target.offsetTop;
    left += target.offsetLeft;
  }
  
  return {offsetLeft:left, offsetTop:top};
};

J'ai mis un position:relative sur la balise P pour tester mais ça foire bien sous IE. Si vous regardez le code, la fonction ci-dessus est tout en bas de la page .

Vous pouvez essayer ici (oui, ça charge dans le vide, c'est normal).

Beh apparement, IE décalle les images de 10px à gauche quand tu le met en position relative.
Le problème n'est donc pas la fonction, mais plus ce décallage d'IE, parce que si tu récupère les offsetTop et Left, il récupère la même valeur que sur FF.
Mais je n'ai pas réussi à récupérer la valeur de ce decallage .

À priori il met un décalage identique sur toutes les images à partir du moment où il y a une position relative, je crois que je vais donc retirer 10px quand le navigateur est IE, si je rencontre un problème un jour alors je modifierai comme je peux.

Oui mais le test browsers, cay mal, car on peut facilement se faire passer pour un autre navigateur.
Donc, le mieux, c'est de laisser tomber la position:relative .

Mais c'est pas moi qui choisi si y'a une position relative ou non, c'est l'utilisateur qui aura ce code x)
Et puis t'es plutôt bien placé pour savoir que ce code sera distribué .

De plus pour tester si il s'agit bien d'IE y'a un moyen infaillible (ou presque !) :

if(window.ActiveXObject) {
  // Il s'agit d'IE !
}

Ben oui, y'a que IE qui gère les activeX .

@ElodiasAdimou Bonjour, merci de créer votre propre sujet en incluant votre code avec le bouton code </> , fonctionnalité incluse dans ce forum. 

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.