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 !