11528 sujets

JavaScript, DOM et API Web HTML5

Trouver la position x,y d'une image dans internet explorer ?

Bonjour à tous,

Une petite question qui me pose un gros souci s'il vous plait :

J'ai une page web avec une image.
Dans firefox, j'ai les propriétés

document.images."nom de l'image".x
et
document.images."nom de l'image".y

mais je ne trouve pas l’équivalent dans internet explorer ?..

Merci pour votre aide...

Alain Smiley jap
T'es sûr que tu veux pas utiliser jQuery ? Smiley smile 


var posX = document.getElementById('myPic').offsetLeft;
var posY = document.getElementById('myPic').offsetTop;

alert(posX + ' ' + posY);

Modifié par jb_gfx (29 Jun 2011 - 17:24)
Bonjour,

Merci pour ton aide Smiley smile

Malheureusement ça me renvoit 0,0 alors que ça devrait plutôt être genre 200,300.
Est ce qu'il faut que je l'incorpore dans un autre objet ?..

Merci,
Alain
Bonjour,

Pour que cela fonctionne, il faut que ton image soit positionnée, par exemple:
#mon_image {position:relative; left:300px; top:150px;}
lddsoft a écrit :
Bonjour,

Pour que cela fonctionne, il faut que ton image soit positionnée, par exemple:
#mon_image {position:relative; left:300px; top:150px;}


ok!

ça n'est pas le cas.. C'est une vieille appli que je rafistole et qui place ses objets dans un tableau.. A l'ancienne quoi..

Merci,
Alain
Ceci devrait répondre à ton attente. Il faudra adapter bien sûr ^^!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Trouver les coordonnées</title>
<script type="text/javascript">
var curleft, curtop = 0;
function findPos(obj) {
	curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
		while (obj = obj.offsetParent);
		return [curleft,curtop];
	}
}
</script></head>
<body style="margin:0;padding:0;font:normal 14px arial;">
<div style="height:100px;background:#ffcc99">
	Pour remplir l'espace
</div>
<div>
	<span>>>>>>>>>>>>></span>
	<span id="obj" style="background:red">object à localiser</span>
</div>
<form action="#">
<br>
<input 
	type="button" 
	value="POSITION de l'objet à localiser" 
	onclick="findPos(document.getElementById('obj'));alert('Left='+curleft+' - Top='+curtop)">
</form></body></html>
Salut,
La vraie instruction jQuery serait plutot : 


$('#imgID').position().left
// ou 
$('#imgID').offset().left


(Fonctionne aussi avec .top)

:)
@spiral123

Pourquoi dis-tu "La vraie instruction jQuery serait plutot ...."? Jusqu'ici, il n'y a pas eu recours à jQuery. C'était du "simple" javascript.
Si jQuery n'est pas utilisé ailleurs dans sa page, je ne vois vraiment pas pourquoi il faudrait faire appel à cette librairie, alors que quelques lignes en js suffisent à fournir le "top" et le "left" d'un élément sous IE, FF ...
lddsoft a écrit :
Ceci devrait répondre à ton attente. Il faudra adapter bien sûr ^^!

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
  &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;&lt;head&gt;
&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;title&gt;Trouver les coordonnées&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var curleft, curtop = 0;
function findPos(obj) {
	curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
		while (obj = obj.offsetParent);
		return [curleft,curtop];
	}
}
&lt;/script&gt;&lt;/head&gt;
&lt;body style=&quot;margin:0;padding:0;font:normal 14px arial;&quot;&gt;
&lt;div style=&quot;height:100px;background:#ffcc99&quot;&gt;
	Pour remplir l'espace
&lt;/div&gt;
&lt;div&gt;
	&lt;span&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;/span&gt;
	&lt;span id=&quot;obj&quot; style=&quot;background:red&quot;&gt;object à localiser&lt;/span&gt;
&lt;/div&gt;
&lt;form action=&quot;#&quot;&gt;
&lt;br&gt;
&lt;input 
	type=&quot;button&quot; 
	value=&quot;POSITION de l'objet à localiser&quot; 
	onclick=&quot;findPos(document.getElementById('obj'));alert('Left='+curleft+' - Top='+curtop)&quot;&gt;
&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;


Génial, ça fonctionne très bien!

Merci à tous, et promis pour mes futures applis j'utiliserai Jquery Smiley smile

Alain
Euh ... merci d'utiliser le code que j'ai proposé Smiley ravi , mais il n'est nullement en jQuery. Mais peut-être n'as-tu pas lu ma remarque à spiral123 ou ai-je mal compris ta phrase
alain91 a écrit :
... promis pour mes futures applis j'utiliserai Jquery
Si c'est le cas, mea culpa ...
Sujet clos
Aller à