Discussion :

[SpaceFrog]

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 :

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

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

[SpaceFrog]

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 :

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

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

[SpaceFrog]

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 :

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

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>

[SpaceFrog]

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