I'm working on a site design using a good deal of DHTML and have run into a snag. I'm trying to detect where the user's mouse is, but I can't for the life of me get the correct position. I'm using the mouse detection script from quirksmode, but instead of giving me a position anywhere near the mouse (which in the case of what I was attempting to detect would of been somewhere in the neighbourhood of 100,350), but instead thinking my mouse is down outside of the page view somewhere around 560X. (Just in case it makes a difference, I have part of the page pulled in with a php require() ).
tooltip.js
index.php
start.php
mainstyle.css
tooltip.js
Code:
function inittooltip(target)
{
tltp = new getObj(target);
tltp.obj.onmouseover = showtooltip;
tltp.obj.onmouseout = stoptooltip;
}
function showtooltip(e)
{
var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1)
var posx = 0;
var posy = 0;
var targ;
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;
posy = e.clientY;
if (isIE)
{
posx += document.body.scrollLeft;
posy += document.body.scrollTop;
}
}
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
if (targ == "[object HTMLImageElement]") targ = targ.parentNode;
tltarg = new getObj('tltp' + targ.id);
alert(posx);
tltarg.style.top = posx + 'px';
tltarg.style.left = posy + 'px';
tltarg.style.display = "block";
}
function stoptooltip(e)
{
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = getObjNN4(document,name);
this.style = this.obj;
}
}
function getObjNN4(obj,name)
{
var x = obj.layers;
var thereturn;
for (var i=0;i<x.length;i++)
{
if (x[i].id == name)
thereturn = x[i];
else if (x[i].layers.length)
var tmp = getObjNN4(x[i],name);
if (tmp) thereturn = tmp;
}
return thereturn;
}index.php
Code:
<html>
<head>
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL & ~E_NOTICE);
?>
<link rel="stylesheet" href="template/styles/mainstyle.css" />
<title>Babillon Networks</title>
<script language="javascript" type="text/javascript" src="bin/js/dom-drag.js">
</script>
<script language="javascript" type="text/javascript" src="bin/js/tooltip.js">
</script>
</head>
<body>
<?php
require('template/main/start.php');
?>
<script language="javascript">
Drag.init(document.getElementById('mainmenu'));
</script>
</body>
</html>start.php
Code:
<div id="mainmenu" style="position: absolute; top: 100px; left: 300px;">
<span id="maintitle" style="z-index: 3;">
<img src="template/images/babilnet_title.jpg" />
</span>
<span id="navbox" style="z-index: 2;">
<span id="about" onmouseover="inittooltip('about')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="products" onmouseover="inittooltip('products')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="subsidiaries" onmouseover="inittooltip('subsidiaries')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="portfolio" onmouseover="inittooltip('portfolio')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="content" onmouseover="inittooltip('content')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="contact" onmouseover="inittooltip('contact')">
<img src="template/images/babilnet_block.jpg" />
</span>
<div id="display" style="z-index: 1;">
</div>
</span>
<span id="tltpabout" class="tooltip" style="z-index: 10; position: absolute;">
</span>
<span id="tltpproducts" class="tooltip" style="z-index: 10; position: absolute;">
</span>
<span id="tltpsubsidiaries" class="tooltip" style="z-index: 10; position: absolute;">
</span>
<span id="tltpportfolio" class="tooltip" style="z-index: 10; position: absolute;">
</span>
<span id="tltpcontent" class="tooltip" style="z-index: 10; position: absolute;">
</span>
<span id="tltpcontact" class="tooltip" style="z-index: 10; position: absolute;">
</span>
</div>mainstyle.css
Code:
#mainmenu {
background-color: #C7C7C7;
max-width: 350px;
min-height: 200px;
padding: 10px 10px 10px 10px;
}
#navbox {
position: relative;
top: 10px;
}
#maintitle {
position: relative;
float: left;
padding-right: 20px;
}
#display {
position: relative;
min-width: 330px;
min-height: 170px;
top: -4px;
background-color: #FFFFFF;
}
.tooltip {
display: none;
background-color: #C7C7C7;
border-style: solid;
border-width: 2px;
border-color: #B70302;
}