Document crosshair enhancement request

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

This is a great effect. It could be applied more widely if there were some enhancements to the way it works:

Crosshair appears only when the cursor is within a specified area. Crosshair is not visible when the cursor is outside this area.
Crosshair lines can be limited to a specified area. For example, the lines might extend to the edges of an image, but not beyond.

The attached image shows this more clearly.

If anyone can figure out how to do this, please post new code.

Thanks.

Buckhorn

**jscheuer1** · 09-21-2005, 06:52 AM

You may want to refine this a bit but, the general idea is there. For some reason Opera doesn't do too well with it, good in IE6 and FF1.0.6:

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>
<div id="container" style="position:relative;left:40px;top:70px;overflow:hidden;width:574px;height:349px;">
<table style="border-collapse:collapse;width:574px;height:349px;" onmouseout="hideCross();">
<tr><td style="position:relative;background-color:white;z-index:101;"><div style="position:relative;background-color:white;z-index:101;">&nbsp;</div></td><td style="background-color:#90CEF3;width:468px;height:50px;" onmouseover="hideCross();">&nbsp;</td></tr><tr>
<td rowspan="5" height="260" style="background-color:#DF99BE;width:106px;height:299px;" onmouseover="hideCross();">&nbsp;</td><td rowspan="5" onmouseover="showCross();" style="background-color:#D9D9D9;width:468px;height:299px;">&nbsp;</td>
                                                      </tr>
                                                      </table>
<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 hideCross(){
document.getElementById('leftright').style.visibility=document.getElementById('topdown').style.visibility="hidden"
}

function showCross(){
document.getElementById('leftright').style.visibility=document.getElementById('topdown').style.visibility="visible"
}

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 (document.getElementById('container')||container||document.container){
var contX=ie? container.offsetLeft : dom? document.getElementById('container').offsetLeft : document.container.y
var contY=ie? container.offsetTop : dom? document.getElementById('container').offsetTop : document.container.x
if(dom&&!ie){
contX-=2
contY-=2
}
if(window.opera){
contX+=8
contY+=8
}
}

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+
leftright.style.pixelTop=iecompattest().scrollTop+event.clientY+1-contY
topdown.style.pixelTop=iecompattest().scrollTop
if (event.clientX<iecompattest().clientWidth-2)
topdown.style.pixelLeft=iecompattest().scrollLeft+event.clientX+1-contX
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.top=e.pageY-contY+'px'
document.getElementById('topdown').style.top=pageYOffset+'px'
document.getElementById('topdown').style.left=e.pageX-contX+'px'
}
else {
//move cross engine for NS 4+
document.leftright.visibility=document.topdown.visibility='visible'
document.leftright.top=e.y+1-contY
document.topdown.top=pageYOffset
document.topdown.left=e.x+1-contX
}
}

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>
</div>
</body>
</html>

**buckhorn** · 09-21-2005, 09:15 PM

Mad Professor,

Thank you, thank you, thank you.

I am privileged to learn at the feet of a JavaScript master.

Buckhorn

Thread: Document crosshair enhancement request

Thread Tools

Search Thread

Document crosshair enhancement request

Bookmarks

Bookmarks

Posting Permissions