首页 新闻 搜索 专区 学院

js如何在image标签上获取鼠标停留坐标位置

0
悬赏园豆:10 [已解决问题] 解决于 2015-09-23 17:42

下面是一张图片,需要获取鼠标位置,判断鼠标选中的坐标点,并将图片分8个坐标区域,根据鼠标选中的坐标点,判断选中区域并给上标记,但现在遇到的问题是,鼠标放上去(我先试试onmousemove事件,看看大致的坐标点),图片不见了,有什么好的解决办法吗?

Mask1的主页 Mask1 | 初学一级 | 园豆:113
提问于:2015-09-23 14:32
< >
分享
最佳答案
0
<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;">&nbsp;</div>

测试效果:

收获园豆:10
稳稳的河 | 老鸟四级 |园豆:4216 | 2015-09-23 15:17

问题已经解决了

<%@ 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);



        }
    }

}
Mask1 | 园豆:113 (初学一级) | 2015-09-23 17:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册