onmouseover area shows div content at mouse coordinates [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question does not appear to be about programming within the scope defined in the help center.

Closed 8 years ago.

Improve this question

Why do this code doesn't work with firefox and ie? I am using ie 10 and firefox 25, with chrome it works without problems. Firefox shows the div but not at the right position (mouse coordinates).

The javascript:

<script>
    function show(id) {
      document.getElementById(id).style.display = "block";
      var topPixel = event.clientY; 
      var leftPixel = event.clientX; 
      document.getElementById(id).style.top = topPixel + "px"; 
      document.getElementById(id).style.left = leftPixel + "px";
    };
    function hide(id) {
      document.getElementById(id).style.display = "none";
    };
</script>

The css:

<style>
.show {display: none;position:absolute;}
</style>

The html with php($data is read correctly):

<img src="picture.jpg" width="100" height="100" border="0" alt="img" usemap="#img">
<map name="img">
<?php while ($data = mysql_fetch_array($db_erg, MYSQL_ASSOC)) { ?>      
    <area shape="rect" coords="10,10,30,30" href="" alt="#" title="" onmouseover="show('<?php echo $data['id'];?>');" onmouseout="hide('<?php echo $data['id'];?>');" />
    <div class="show" id="<?php echo $data['id'];?>">
        <?php echo $data['text'];?>
    </div>
<?php } ?>
</map>

Function: A div with the corresponding content and at the mouse coordinates should be open when the mouse is on an area.

Answer 1

http://jsfiddle.net/tX25a/2/

div=document.getElementsByTagName('div')[0];
btShow=document.getElementsByTagName('button')[0];
btHide=document.getElementsByTagName('button')[1];
btShow.onclick=function(){
    document.body.onmousemove=function(event){
        var e=event||window.event;
        div.style.left=e.clientX+"px";
        div.style.top=e.clientY+"px";
    }
    div.style.display="block";
}
btHide.onclick=function(){
    document.body.onmousemove=function(){};
    div.style.display="none";
}

Works for me on FF17ESR, OS/2, should work on IE and WebKit as well. If you want the block to disappear onmouseout and appear onmouseover, rather than on buttons' clicks, then just define the proper event handlers.