I have a requirement to display text at the mouse position when I fire the onMouseOver event. I can find the mouse coordinates. I am using a div for the text. I can make the code work for IE but not for Firefox. In Firefox, the text is displayed in upper left corner of page, seems to refuse the top and left parameters for position:absolute. I used alerts and the skn.left and skn.top variables are not being populated. I don't know why Firefox cannot recognize these equates. The code is listed below. Any suggestions as to what I am doing wrong??? A BIG TIA to ANYONE who can help me with this. I have been wrestling with this for 2 days. Obviously I am new to Javascript and CSS.
Code:
<style type="text/css"><!--//
A:hover {background:white;}
.box{font-family:Arial,sans-serif; font-size:smaller;}
.boxpopup {
font-family:Arial,sans-serif;font-size:70%; /*POPUP FONT */
color:#006; background:#FEF1B5; /*COLOURS*/
width:200px; text-align:center; /*BOX WIDTH, CENTERED TEXT */
padding:4px 5px 4px 5px; /*SPACE FROM TEXT TO BORDER*/
font-weight:bold; /* TEXT WEIGHT*/
border:1px solid gray; /*POPUP BORDER*/
}
#pdqbox {position:absolute; visibility:hidden; z-index:200;}
//-->
</style>
</head>
<body>
<div id="pdqbox"></div>
<script TYPE="text/javascript"><!--//
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;
OffsetX=20; // MODIFY THESE VALUES TO
OffsetY=35; // CHANGE THE POSITION.
var skn,yyy=-1000;
//Not really using these variables.
// I know that document.all is BAD coding.
// But I am getting desparate...
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
skn=document.getElementById("pdqbox").style;
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
skn.visibility="visible"
skn.display="none"
}
// alert('skn='+skn);
document.onmousemove=get_mouse;
function fn_popup(msg){
var content="<div class=boxpopup>"+msg+"</div>";
yyy=OffsetY;
// skn=document.getElementById("pdqbox").style;
document.getElementById("pdqbox").innerHTML=content;
alert('skn='+skn)
skn.display=';
}
function get_mouse(e){
// IE does not pass the event, while FireFox does
if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
if (e)
{
if (e.pageX || e.pageY)
{
mousex = e.pageX;
mousey = e.pageY;
algor = '[e.pageX]';
if (e.clientX || e.clientY) algor += ' [e.clientX] '
}
else if (e.clientX || e.clientY)
{ // works on IE6,FF,Moz,Opera7
// Note: I am adding together both the "body" and "documentElement" scroll positions
// this lets me cover for the quirks that happen based on the "doctype" of the html page.
// (example: IE6 in compatibility mode or strict)
// Based on the different ways that IE,FF,Moz,Opera use these ScrollValues for body and documentElement
// it looks like they will fill EITHER ONE SCROLL VALUE OR THE OTHER, NOT BOTH
//
mousex = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mousey = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
algor = '[e.clientX]';
if (e.pageX || e.pageY) algor += ' [e.pageX] '
}
}
var x=mousex
var y=mousey
skn.left=x+OffsetX;
skn.top=y+yyy;
//document.getElementById("pdqbox").left=x+OffsetX;
//document.getElementById("pdqbox").top=y+yyy;
}
function fn_remove_popup(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
//else if (ns6||ie4)
skn.display="none"
}
//-->
</script>
and then down further in the body...
<area shape="rect"
coords="251,68,284,101"
onMouseOver="fn_popup('We secure your valuables - Jimmys lock & Safe')"
onMouseOut="fn_remove_popup()"
href="[URL unfurl="true"]http://www.anyurl.com"[/URL]
title="" alt=""/>