popup div onmouseover

[pesho318i]

hi

I'd like to have a <div> block onmouseover, and the block should appear next to the mouse cursor... Ideally, the background should fade a little.

roughly, I need the behavior of the links here:
http://www.javascriptkit.com/javatutors/dom2.shtml

Can you suggest possible implementations?

Thanks!

[Rakuli]

Okay, this is reasonably simple... give the element you want to have the div appear next to the id of id="trigger"... or something else and replace trigger below..

Then somewhere in your document -- just under the body tag add a div styled how you wish, with an id of id="theBullet" and use CSS to give it a display:none;

Then, add this to the bottom of your page before the </body> tag -- or call it into your document from an external file before the body tag.

Code: Select all

<script type="text/javascript">

var trigger = document.getElementById("trigger"); // this is the element where the mouse will go over
trigger.onmouseover = function() {toggleOn(e, 'theBullet');}; // call the function toggleOn
trigget.onmouseout = function () { document.getElementById('theBullet').style.display = 'none'}; // hide the bullet div

function toggleOn(e, di)
{
    var theBullet = document.getElementById(di);

    var x = e.pageX ? e.pageX : e.clientX ? e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); // get the location on the X axis
    var y = e.pageY ? e.pageY : e.clientY ? e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); // get the location on the Y axis

  theBullet.style.position = 'absolute'; 
  theBullet.style.top = y + 'px'; // move into position
  theBullet.style.left = x + 'px';
  theBullet.style.display = 'block'; // make it appear
}
</script>

Hope that helps.

[pesho318i]

hey Rakuli,
thanks, but I could only run it in IE.

First, your two lines for var x and var y gave an error: "missing : in conditional expression"

So I got the coordinates in another way:

Code: Select all

     
var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)     {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }

I also removed the first input parameter (e) in the toggleOn function.

Now it's working fine in IE, but Firefox complains that e has no properties: "if (e.pageX || e.pageY)"

How shall I make it recognize the event?

Thanks again