Document Crosshair - mouseover effect

**JamesW** · 09-20-2005, 04:43 PM

I am currently using the Document Crosshair - mouse over effect in a web page that I am currently working on. It works great in IE - when I showed it to a collegue they remarked that when they viewed it in Firefox there was no functionaility.

Here is the location of the Document Crosshair mouseover effect that I am referring too.

Document Crosshair - mouseover effect in my web page

Does anyone have any suggestions on how to get it to work in Firefox?

Thanks in advance
/James

**buckhorn** · 09-21-2005, 01:10 AM

A unique effect!

I'd like to second the request to get this working in Firefox.

Thanks.

Buckhorn

**jscheuer1** · 09-21-2005, 04:31 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:black;
background-color:black;
z-index:100;
font-size:0;
visibility:hidden;
}
-->
</style>
</head>
<body>

<script type="text/javascript">
<!--

/*
Document crosshair Script- 
By Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more free DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
Modified here for NS4+, FF1.0.1+, OP8+, IE5+
by jscheuer1 in http://www.dynamicdrive.com/forums
*/

document.write('<div id="leftright"></div><div id="topdown"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

var ie=document.all&&!window.opera? document.all : 0
var dom=document.getElementById

if (ie){
leftright.style.width=iecompattest().clientWidth-2+'px'
topdown.style.height=iecompattest().clientHeight-2+'px'
leftright.style.height=0
}
else if (dom){
document.getElementById('leftright').style.width=window.innerWidth+'px'
document.getElementById('topdown').style.height=window.innerHeight+'px'
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}


function followmouse1(){
//move cross engine for IE 5+
topdown.style.visibility=leftright.style.visibility='visible'
leftright.style.pixelTop=iecompattest().scrollTop+event.clientY+1
topdown.style.pixelTop=iecompattest().scrollTop
if (event.clientX<iecompattest().clientWidth-2)
topdown.style.pixelLeft=iecompattest().scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=iecompattest().clientWidth-2
}

function followmouse2(e){
if (dom){
//move cross engine for NS 6+
document.getElementById('leftright').style.width=window.innerWidth+'px'
document.getElementById('topdown').style.height=window.innerHeight+'px'
document.getElementById('leftright').style.visibility=document.getElementById('topdown').style.visibility='visible'
document.getElementById('leftright').style.top=e.pageY+'px'
document.getElementById('topdown').style.top=pageYOffset+'px'
document.getElementById('topdown').style.left=e.pageX+'px'
}
else {
//move cross engine for NS 4+
document.leftright.visibility=document.topdown.visibility='visible'
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
}

if (ie)
document.onmousemove=followmouse1
else if (document.layers||dom){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2

//-->
</script>
</body>
</html>

**buckhorn** · 09-21-2005, 05:25 AM

Thanks, Mad Professor! Works perfectly in FF.

Now, can you tackle "Document crosshair enhancement request," also in this forum? It might be a little more challenging.

Buckhorn

**JamesW** · 09-21-2005, 02:55 PM

Thanks Mad Professor - I have just reworked the htm file and tested it both IE and FF and it works perfect.

Thanks again for the prompt and professional response you gave!!!!

Oops I found a bug: when building the page out I have included a hyperlink on the page. When I mouseover the hyperlink it hightlights the link as its suppose to but when the mouse button is pressed, there is no functionality.

http://64.176.93.3/reefland/fish_compatibility/

**JamesW** · 09-21-2005, 05:06 PM

I spoke before I looked - the enhanced version that was requested by buckhorn solves this problem!!!!!!

Case closed:

Thanks again Mad Professor

**jscheuer1** · 09-22-2005, 02:00 AM

Well, I did some more testing with my original modded version, which is much more widely crossbrowser than the modified version I put together for buckhorn. I found a number of odd things about it including the trouble with links. Now, in IE and Mozilla (NS6+ FF1.0.1+), the effect stops when the mouse moves off of the document, a nice feature. Links are given a higher z-index in the style section so will fire. And no browser needs to reload when the window is resized (a legacy from the DD version in FF, early IE and early NS, that came through in all previous versions of mine). All in all, unless you are using this in a confined space on the page, and even if you are, I'd use this version as the core:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:black;
background-color:black;
z-index:100;
visibility:hidden;
}
*html #leftright {
background-color:transparent;
border-top:1px solid black;
}
a {
position:relative;
z-index:101;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
<!--

/*
Document crosshair Script- 
By Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more free DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
Modified here for NS4+, FF1.0.1+, OP8+, IE5+
by jscheuer1 in http://www.dynamicdrive.com/forums
*/

document.write('<div id="leftright"></div><div id="topdown"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

var ie=document.all&&!window.opera? document.all : 0
var dom=document.getElementById
var theHorz=ie? leftright.style : dom? document.getElementById('leftright').style : document.leftright
var theVert=ie? topdown.style : dom? document.getElementById('topdown').style : document.topdown

function followmouse1(){
//move cross engine for IE 5+
theHorz.width=iecompattest().scrollLeft+iecompattest().clientWidth-2+'px'
theVert.height=iecompattest().clientHeight-2+'px'
theVert.visibility=theHorz.visibility='visible'
theHorz.pixelTop=iecompattest().scrollTop+event.clientY-2
theVert.pixelTop=iecompattest().scrollTop
if (event.clientX<iecompattest().clientWidth-2)
theVert.pixelLeft=iecompattest().scrollLeft+event.clientX-2
else
theVert.pixelLeft=iecompattest().clientWidth-2
}

function followmouse2(e){
theHorz.visibility=theVert.visibility='visible'
if (dom){
//move cross engine for NS 6+
theHorz.width=iecompattest().scrollLeft+window.innerWidth+'px'
adjust=(window.innerWidth<iecompattest().offsetWidth)? 16 : 0
theVert.height=window.innerHeight-adjust+'px'
theVert.top=pageYOffset>iecompattest().offsetHeight-window.innerHeight&&!window.opera? iecompattest().offsetHeight-window.innerHeight+'px' : pageYOffset+'px'
theHorz.top=e.pageY+'px'
theVert.left=e.pageX+'px'
}
else {
//move cross engine for NS 4+
theHorz.clip.width=self.pageXOffset+window.innerWidth
theHorz.clip.height=1
theVert.clip.width=1
theVert.clip.height=window.innerHeight
theHorz.top=e.y-2
theVert.top=pageYOffset
theVert.left=e.x-2
}
}

if (ie)
document.onmousemove=followmouse1
else if (document.layers||dom){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

if(!window.opera)
window.onresize=document.onmouseout=function(){
theHorz.visibility=theVert.visibility='hidden'
}
if(window.opera)
window.onresize=function(){
theHorz.visibility=theVert.visibility='hidden'
}

//-->
</script>
</body>
</html>

**Warmspirited** · 04-20-2007, 05:40 PM

This CrossHair is excellent. I am trying to create an AutoCAD website and this fares well to emulate the AutoCAD screen.

However, I am trying to integrate the "Context Menu II" which includes a zoom effect. Is there a way to regenerate the crosshair effect with each zoom?

**boogyman** · 04-20-2007, 06:07 PM

Your modified version doesnt show the Y-axis .... see attached image.... firefox 1.5

Thread: Document Crosshair - mouseover effect

Thread Tools

Search Thread

Document Crosshair - mouseover effect

Bookmarks

Bookmarks

Posting Permissions