offsetTop sur area relativité .

Version imprimable

Je mappe une image, et sur le onmouseover de l'image j'essaye de positionner une autre image par rapport à l'area du map ...

au départ j'ai essayé de splitter les coords de l'area pour en récupérer le top et le left, mais le map étant a priori lié à l'image j'ai alors essayé" d'en récupérer l'offsetTop avec la methode de DenisC offsetParent ...

Mais rien n'y fait je ne recupère toujours que la position par rapport à l'image et pas par rapport à la page ... :(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <script type='text/javascript'> function calculeOffsetLeft(r){ return calculeOffset(r,"offsetLeft") } function calculeOffsetTop(r){ return calculeOffset(r,"offsetTop") } function calculeOffset(element,attr){ var offset=0; while(element){ offset+=element[attr]; element=element.offsetParent } return offset } function PlaceSpot(here){ var BallTop=calculeOffsetTop(here); var BallLeft=calculeOffsetLeft(here); document.getElementById('ball').style.top=BallTop document.getElementById('ball').style.left=BallLeft }
Le but est de faire venir se positionner une image en position absolute par rapport à l'area du map ...

Bon après plusieurs bidouilles il s'avère que c'est un tableau qui gène le calcul des positions offset...
Sans le tableau ça passe, avec le tableau ça passe pas ...

et faut quand même ajouter la position de l'image :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type='text/javascript'>
 
 
function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}
 
function PlaceSpot(here){
var basePic=document.getElementById('oulaoula')
var BallTop=calculeOffsetTop(here) + calculeOffsetTop(basePic)+4;
var BallLeft=calculeOffsetLeft(here) + calculeOffsetLeft(basePic)+3;
 
document.getElementById('ball').style.top=BallTop 
document.getElementById('ball').style.left=BallLeft 
 
 
}
 
</script>

Seul souci ça ne fonctionne pas avec fireFox :(

Bon voici qui tourne sous ffx ...
Seul petit souci restant, le onresize, le point ne suit pas ...
J'ai donc collé une fonction sur le onresize qui fonctionne sous IE et pas ffx :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type='text/javascript'>
var Active
 
function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}
 
function PlaceSpot(here){
Active=here
var basePic=document.getElementById('oulaoula')
var BallTop= Number(here[1]) + calculeOffsetTop(basePic)+6
var BallLeft=Number(here[0]) + calculeOffsetLeft(basePic)+5;
 
document.getElementById('ball').style.top=BallTop +"px"
document.getElementById('ball').style.left=BallLeft +"px"
document.getElementById('ball').style.display=""
 
}
 
window.onresize=function(){	if(Active){PlaceSpot(Active);}}
 
</script>

06/11/2006, 10h28
SpaceFrog

Bon ben il semblerait que j'avais juste un souci de lag ...
tout fonctionne !