下面是一张图片,需要获取鼠标位置,判断鼠标选中的坐标点,并将图片分8个坐标区域,根据鼠标选中的坐标点,判断选中区域并给上标记,但现在遇到的问题是,鼠标放上去(我先试试onmousemove事件,看看大致的坐标点),图片不见了,有什么好的解决办法吗?
<title>Js获取适时获取鼠标坐标值并显示</title> <script type="text/javascript"> var getCoordInDocumentExample = function(){ var coords = document.getElementById("coords"); coords.onmousemove = function(e){ var pointer = getCoordInDocument(e); var coord = document.getElementById("coord"); coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")"; } } var getCoordInDocument = function(e) { e = e || window.event; var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y= e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return {'x':x,'y':y}; } window.onload = function(){ getCoordInDocumentExample(); }; </script> <div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #0066cc;"> 请在此移动鼠标。 </div> <br /> <div id="coord" style="width:500px;border:2px solid #336699;"> </div>
测试效果:
问题已经解决了
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_0922w.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> function getScreen(e) { document.getElementById("container").innerHTML = event.offsetX + " , " + event.offsetY; } </script> <style> #container { left: 0px; bottom: 0px; text-align: left; width:293px; background-repeat: no-repeat; height: 190px; } </style> </head> <body> <form id="form1" runat="server"> <div onmousemove="getScreen(event)" runat="server" id="container"> </div> </form> </body> </html> using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Security.Cryptography.X509Certificates; using System.Net.Security; namespace _0922w { public partial class WebForm1 : System.Web.UI.Page { static CookieContainer Cookies = new CookieContainer(); static HttpWebRequest myHttpWebRequest; protected void Page_Load(object sender, EventArgs e) { string oneUrl = "https://kyfw.12306.cn/otn/passcodeNew/getPassCodeNew?module=login&rand=sjrand"; myHttpWebRequest = (HttpWebRequest)WebRequest.Create(oneUrl);//请求的URL myHttpWebRequest.CookieContainer = Cookies;//*发送COOKIE //if (Session["tzcooket"] != null) // myHttpWebRequest.Headers.Set("Set-Cookie", Session["tzcooket"].ToString()); myHttpWebRequest.Method = "GET"; myHttpWebRequest.ContentType = "application/x-www-form-urlencoded"; //获取返回资源 HttpWebResponse response = (HttpWebResponse)myHttpWebRequest.GetResponse(); Stream responseStream = response.GetResponseStream(); System.Drawing.Image bitmapImage = System.Drawing.Bitmap.FromStream(responseStream) as System.Drawing.Image; string imgName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".jpg"; bitmapImage.Save("D:\\documents\\visual studio 2015\\Projects\\0922\\0922w\\image\\" + imgName, System.Drawing.Imaging.ImageFormat.Jpeg); //Image1.ImageUrl = "~/image/1152165471.jpg"; this.container.Style.Remove(HtmlTextWriterStyle.BackgroundImage); this.container.Style.Add(HtmlTextWriterStyle.BackgroundImage, "http://localhost:7520/image/" + imgName); } } }