mouse over div position

Hi there

I am new to javascript and am have a bit of trouble
with this script I am trying to write
basicly I have a div with a image holder in it
when I call the drawDiv fuction the div moves
to the postion of the href and displays the image
but if I scroll the page the div does not postion it's
self in the rigth place and the image does not diplay

here is the code in the <head>

function drawDiv(whichDiv,imageref)
{
     var image = document.getElementById('image')
       image.src = imageref
     var x = document.getElementById(whichDiv)
     x.style.display = 'block'
     x.style.top = window.event.y - 25
     x.style.left = window.event.x + 25
}
function hider(whichDiv)
{
   var x = document.getElementById(whichDiv)
x.style.display = 'none'
      var image = document.getElementById('image')
      
       image.src = ''
}

here is the code in the <body>
<a href="#" onMouseOver="drawDiv('mydiv','http://www.cs.panam.edu/~chen/acss/javascript/jseyes.gif')" onMouseOut="hider('mydiv')">option1
  </a>

any help with this would be great thanks

mac : )
LVL 1
webpolsolAsked:
Who is Participating?
 
ragerinoConnect With a Mentor Commented:
try using

x.style.top = (window.event.y - 25 + document.body.scrollTop) + 'px';
x.style.left = (window.event.x + 25 + document.body.scrollLeft) + 'px';

but there are better ways to find out the position of an element
i created a small javascript class for this problem which finds out the absolute positon of an element relative to the left upper position of the document.


/*****************************************************
**   Objekt Dimension                               **
*****************************************************/
function Dimension(element){
      this.x=-1;
      this.y=-1;
      this.w=0;
      this.h=0;
      if (element==document){
            this.x=element.body.scrollLeft;
            this.y=element.body.scrollTop;
            this.w=element.body.clientWidth;
            this.h=element.body.clientHeight;
      }else if (element!=null){
            var e=element;
            var left=e.offsetLeft;
            while ((e=e.offsetParent)!=null) {
                  left+=e.offsetLeft;
            }
            var e=element;
            var top=e.offsetTop;
            while((e=e.offsetParent)!=null) {
                  top+=e.offsetTop;
            }
            this.x=left;
            this.y=top;
            this.w=element.offsetWidth;
            this.h=element.offsetHeight;
      }
}
/*****************************************************
**   Ende Objekt Dimension                          **
*****************************************************/


you can use it in your little proggy like this way.

function drawDiv(element,whichDiv,imageref){
      var x = document.getElementById(whichDiv);
      x.style.position='absolute';
      var image = x.getElementById('image'); //the image must be nested inside the div
      image.src = imageref;
      var dime=new Dimension(element);
      var dimdoc=new Dimenson(document);
      //guarantee that the whole div is displayed on the visible page
      x.style.top = (dime.x>dimdoc.x)?dime.x:dimdoc.x;
      x.style.left = (dime.y>dimdoc.y)?dime.y:dimdoc.y;
      //show the div
      x.style.display = 'block';
}

function hider(whichDiv){
      document.getElementById(whichDiv).style.display = 'none';
      document.getElementById('image').src='';
}

here is the code in the <body>
<a href="#" onMouseOver="drawDiv(this,'mydiv','http://www.cs.panam.edu/~chen/acss/javascript/jseyes.gif')" onMouseOut="hider('mydiv')">option1
  </a>
0
 
webpolsolAuthor Commented:
thanks work great thanks

couldn't get the function Dimension() to
work

cheers

mac : )
0
 
ragerinoCommented:
its not a function its an object

thanx for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.