JavaScript : Point the Way!
Contents ]
Dr Benton

What's the Point?

Now we get to the heart of our function PointeVers():

function PointeVers(x,y)
{

if(ie4>0)
{
  parent.frames['droite'].document.all.cible.style.left = x;
  parent.frames['droite'].document.all.cible.style.top = y;
  parent.frames['droite'].scroll(x-350,y-150);
}
  else
{
  parent.frames['droite'].document.cible.left = x;
  parent.frames['droite'].document.cible.top = y;
  parent.frames['droite'].scrollTo(x-350,y-150);
}

}
</SCRIPT>

This function just moves the mask cible in the righthand frame and gives it new coordinates. For this purpose we change the .left and .top properties of the cible object. But be careful! The reference to these coordinates differs between Navigator (document.cible.left) and Internet Explorer (document.all.cible.style.left).

Once this positioning has been done, it is advisable to force the scrolling of the frame. In fact, if the browser window is too small, the pointer might not be visible anymore once it has been moved. So we need to activate the scrollbars to make sure the pointer is visible again. To do this, we call on the functions scroll() and scrollTo(), together with two parameters. The way the function call is made here positions the pointer, which is given as an argument, in the top left corner of the browser window.

Nothing very complicated! A last look at our example before heading off to the Tour de France?

Fancy going one better? How about creating an animation to move the pointer between two points? Or use an animated pointer?




  1   2   3   4