Discussion :

[wehtam]

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 :

<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 :

<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

[E.Bzz]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[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

[E.Bzz]

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

Tu as testé ?

[wehtam]

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

[E.Bzz]

Manquait un bout

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+