Solved

mouse over div position

Posted on 2004-09-13
3
25,452 Views
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
  </a>

any help with this would be great thanks

mac : )
0
Comment
Question by:webpolsol
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
ragerino earned 350 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){
      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
 
LVL 1

Author Comment

by:webpolsol
ID: 12043837
thanks work great thanks

couldn't get the function Dimension() to
work

cheers

mac : )
0
 
LVL 3

Expert Comment

by:ragerino
ID: 12043948
its not a function its an object

thanx for the points
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now