Position souris sur clic image

Bonjour,
Je cherche à faire la chose suivante :
J'ai une image et un div de 8px par 8px
J'aimerai positionner le div sur l'endroit exact où je clic sur l'image.
Cela marche super bien lorsque mon image est en haut de ma page mais dès que je la mets en bas de page et que je doit scroller, tout est décalé.
Comment faire merci.

Voici mon code javascript :

Citation:

---

<SCRIPT language=javascript>
function mouseMove (evt) {
var x=0; var y=0;
if (document.layers) {
x=evt.x; y=evt.y;
}
if (document.all) {
x=event.clientX; y=event.clientY;
} else {
if (document.getElementById) {
x=evt.clientX; y=evt.clientY;
}
}
document.getElementById("y").value = y;
document.getElementById("x").value = x;
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE);
if (document.layers || document.all)
document.onmousemove = mouseMove;
if (document.addEventListener)
document.addEventListener('mousemove', mouseMove, true);
</SCRIPT>
<script language="javascript">

function coord()
{

var offsetLeft = document.getElementById("conteneur").offsetLeft ;
var offsetTop = document.getElementById("conteneur").offsetTop ;
document.getElementById("posX").value=document.getElementById("x").value - offsetLeft ;
document.getElementById("posY").value=document.getElementById("y").value - offsetTop ;
document.getElementById("point").className="point_visible";
document.getElementById("point").style.left=document.getElementById("x").value - offsetLeft ;
document.getElementById("point").style.top=document.getElementById("y").value - offsetTop ;
}


</script>

---

Et mon code html :

Citation:

---

<div style="position:relative;left:0px;top:0px;" id="conteneur">
<div id="point" class="point_invisible"><table width="8" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height:8px;background-color:#FF0000;"></td>
</tr>
</table>
</div>
<div style="width:396px;height:380px;z-index:1;position:relative;" id="div_carte"><img src="../images/carte/france.jpg" id="carte" onclick="javascript:coord();"/></div>
</div>

Pos X : <input name="posX" type="text" size="4" /><input type="text" name="x" id="x" Value=""> <input type="text" name="y" id="y" Value="">

Pos Y :
<input name="posY" type="text" size="4" /> </div>
</div>

---

Merci d'avance

Bonjour,

Code:

---

1 2 3 4 5

document.getElementById("posX").value=(parseInt(document.getElementById("x").value, 10) - offsetLeft) + "px" ; document.getElementById("posY").value=(parseInt(document.getElementById("y").value, 10) - offsetTop) + "px" ; document.getElementById("point").className="point_visible"; document.getElementById("point").style.left=(parseInt(document.getElementById("x").value, 10) - offsetLeft) + "px" ; document.getElementById("point").style.top=(parseInt(document.getElementById("y").value, 10) - offsetTop) + "px" ;

---

?

:?

A+

non à priori cela ne vient pas de là, ça marche qd mon image est tout en haut de ma page, mais dès que je la met ailleur et que j'utilise les scrollbars, ça par en vrille

Citation:

---

Envoyé par wehtam

non à priori cela ne vient pas de là, ça marche qd mon image est tout en haut de ma page, mais dès que je la met ailleur et que j'utilise les scrollbars, ça par en vrille

---

8O

Tu as testé ?

oui j'ai tester et cela fait la même chose avec mon code et le tien

Manquait un bout

Code:

---

1 2	document.getElementById("point").style.left=(parseInt(document.getElementById("x").value, 10) - offsetLeft + document.body.scrollLeft) + "px" ; document.getElementById("point").style.top=(parseInt(document.getElementById("y").value, 10) - offsetTop + document.body.scrollTop) + "px" ;

---

Mais bon, puisque ça vient pas de là ...

A+