mouse over div position

Posted on 2004-09-13
Medium Priority
Last Modified: 2011-08-18
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

any help with this would be great thanks

mac : )
Question by:webpolsol
  • 2

Accepted Solution

ragerino earned 1400 total points
ID: 12043222
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){
      if (element==document){
      }else if (element!=null){
            var e=element;
            var left=e.offsetLeft;
            while ((e=e.offsetParent)!=null) {
            var e=element;
            var top=e.offsetTop;
            while((e=e.offsetParent)!=null) {
**   Ende Objekt Dimension                          **

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

function drawDiv(element,whichDiv,imageref){
      var x = document.getElementById(whichDiv);
      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';

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

Author Comment

ID: 12043837
thanks work great thanks

couldn't get the function Dimension() to


mac : )

Expert Comment

ID: 12043948
its not a function its an object

thanx for the points

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question