JS生成图片热点

快乐的哈士奇

于 2020-04-21 21:02:46 发布

阅读量1.4k

点赞数

文章标签： js html javascript jquery

本文链接：https://blog.csdn.net/feng65536/article/details/105667609

版权

实现思路：
1、图片容器采用relative的定位方式。
2、监控鼠标左键按下动作。并时时记录和修改轨迹层div的大小。
3、鼠标抬起后记录鼠标移动的起始位置。生成图片热点区域。
效果如下：
在这里插入图片描述
输入节点名称后可以生产JSON对象

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(document).ready(function () {

            ///最终保存数据
            var RequestData = {
                imageGuid: "", //流程_图片id
                hotspots: [
                    {
                        guid: "",
                        coordinate: "",//坐标点
                        describe: ""//锚点说明
                    }
                ]
            };
            var cc = function () {
                return {
                    guid: "",
                    coordinate: {
                        x: "",
                        y: "",
                        x2: "",
                        y2: ""
                    },//坐标点
                    describe: ""//锚点说明
                }
            };
            //每一个热点数据
            var currentHotspots = cc();

            var getGuid = function () {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            }

            var InitialDiv = function (x, y) {
                var div = $('<div style="background-color:#808080;opacity:0.5;"></div>');
                div.css('border')
                div.css('position', 'absolute');
                div.css('left', x);
                div.css('top', y);
                currentHotspots.coordinate.x = x;
                currentHotspots.coordinate.y = y;
                $('body').append(div);
                return div;
            };

            $(".csss").mousedown(function (event, dom) {
                currentHotspots = cc();
                var Guid = getGuid();
                //记录相对应的数据。
                currentHotspots.guid = Guid;
                //写生成对应的层。
                var div = InitialDiv(event.clientX, event.clientY);
                $(".csss").mousemove(function (moveEvent, dom) {
                    div.css('width', moveEvent.clientX - event.clientX);
                    div.css('height', moveEvent.clientY - event.clientY);
                    currentHotspots.coordinate.x2 = moveEvent.clientX;
                    currentHotspots.coordinate.y2 = moveEvent.clientY;
                    return false;
                });
            });

            $(".csss").mouseup(function (event, dom) {
                $(".csss").unbind('mousemove');
                RequestData.hotspots.push(currentHotspots);
            })
            $("#GetJSON").bind('click', function () {
                if (currentHotspots.guid == "") {
                    alert('暂无区域');
                    return false;
                }
                currentHotspots.describe = $("#remarks").val();
            });

            $("#test").bind('click', function () {
                initialPage('images/image3.jpg', RequestData);
            })

            $("#Seave").bind('click', function () {

            });

            var initialPage = function (src, RequestData) {
                var dataContent = $("<div></div>");
                var img = $('<img />');
                img.attr('src', src);
                img.attr('name', "mmm");
                img.attr('usemap', '#mmm');
                var map = $('<map></map>');
                map.attr('name', 'mmm');
                map.attr('id', 'mmm');
                dataContent.append(img);
                dataContent.append(map);
                //生成热点点击对象
                alert(JSON.stringify(RequestData));
                $.each(RequestData.hotspots, function (index, dom) {
                    if (dom.guid == "") {
                        return true;
                    }
                    var area = $('<area shape="rect"/>');
                    area.css('cursor', 'pointer');
                    area.attr('coords', dom.coordinate.x + ',' + dom.coordinate.y + ',' + dom.coordinate.x2 + ',' + dom.coordinate.y2);
                    area.bind('click', function () {
                        alert("我点击热点对象" + index);
                    });
                    map.append(area)
                });
                $('body').append(dataContent);
            }

        });
    </script>
</head>
<body ondrag="return false">
    <div style="position:relative;border:solid 2px black; display:inline-block;">
        <img class="csss" src="images/image3.jpg" />
    </div>
    <div style="display:inline-block;vertical-align:top;padding-left:10px;">
        <p><label>节点说明：</label><input value="" style="width:200px;" id="remarks" /></p>
        <p>
            <input value="获取JSON" type="button" id="GetJSON" />
            <input value="生成测试" type="button" id="test" />
        </p>
    </div>
</body>
</html>

快乐的哈士奇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS生成图片热点

实现思路：1、图片容器采用relative的定位方式。2、监控鼠标左键按下动作。并时时记录和修改轨迹层div的大小。3、鼠标抬起后记录鼠标移动的起始位置。生成图片热点区域。效果如下：输入节点名称后可以生产JSON对象代码如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><hea...
复制链接

扫一扫