求一特效，网页上在一张图片上实现鼠标在该图片上有十字线效果。
思路。。。页面上有一张图片，被一个DIV包含，
鼠标移动到DIV上触发事件
显示 十字线效果
十字线交点处是鼠标尖头上。。。。
哎 做JAVAWEB开发的苦逼的孩子求。。。
[解决办法]
style="cursor:crosshair"这个就是鼠标的十字效果
[解决办法]
<html><head><style><!--#leftright, #topdown{position:absolute;left:0;top:0;width:2;height:2;layer-background-color:#6699cc;background-color:#6699cc;z-index:100;font-size:0px;}--></style><title>十字线</title></head><body><div id="leftright" style="width:expression(document.body.clientWidth)"></div><div id="topdown" style="height:expression(document.body.clientHeight)"></div><script language="JavaScript"><!--var w = (window.innerWidth)?window.innerWidth:(document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth:document.body.offsetWidth;var h = (window.innerHeight)?window.innerHeight:(document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight:document.body.offsetHeight;if (document.all && !window.print){leftright.style.width=w;topdown.style.height=h;}else if (document.layers){document.leftright.clip.width=w;document.leftright.clip.height=5;document.topdown.clip.width=5;document.topdown.clip.height=h;}function followmouse1(){//move cross engine for IE 4+leftright.style.pixelTop=document.body.scrollTop+event.clientY+1topdown.style.pixelTop=document.body.scrollTopif (event.clientX<document.body.clientWidth-2)topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1elsetopdown.style.pixelLeft=document.body.clientWidth-2leftright.style.width=w-21;topdown.style.height=h-5;}function followmouse2(e){//move cross engine for NS 4+document.leftright.top=e.y+6document.topdown.top=pageYOffsetdocument.topdown.left=e.x+6}if (document.all)document.onmousemove=followmouse1else if (document.layers){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=regenerate2function show(){ leftright.style.visiable = ""; topdown.style.visiable = ""; leftright.style.display = ""; topdown.style.display = "";}function hidden(){ leftright.style.visiable = "none"; topdown.style.visiable = "none"; leftright.style.display = "none"; topdown.style.display = "none"; }//--></script><img src="图片" width="300" height="300" onmousemove="show()" onmouseout="hidden()"></body></html>
[解决办法]
<style type="text/css">#dv{position:relative;}#linex{height:1px;width:300px;position:absolute;left:0px;background:#000;overflow:hidden;display:none;}#liney{height:300px;width:1px;position:absolute;top:0px;background:#f00;overflow:hidden;display:none;}</style><div id="dv"><img src="pic.jpg" id="img"/><div id="linex"></div><div id="liney"></div></div><script>window.onload=function(){ var img=document.getElementById('img'),linex=document.getElementById('linex'),liney=document.getElementById('liney'); linex.style.width=img.offsetWidth+'px'; liney.style.height=img.offsetHeight+'px'; document.getElementById('img').onmousemove=function(e){ e=e||window.event; linex.style.display=liney.style.display='block'; linex.style.top=(e.offsetY||e.layerY)+'px'; liney.style.left=(e.offsetX||e.layerX)+'px'; }}</script>