可拖动的图像jquerry和图像映射不一起工作

问题描述

大家好，

我正在尝试为图片创建缩放和拖动功能（类似Google地图布局）。还想将图像的某些部分链接到某些网站。但是我的代码对两者都不起作用。它适用于任何一种功能。请帮助，如果有人知道

Hi all,
i am trying to create a zoom and drag functionality for an image(Something like a Google map layout). Also wants to link certain parts of the image to some sites. But my code doesn't work for both. It works any one of the functionalities. Kindly help,if anyone knows

<link href="Styles/Drag.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        #draggable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable();
        });
    </script>

<img src="image.png" id="draggable" class="ui-widget-content" style="width: 100%;
        height: auto;" usemap="#Image-Maps_72013121606424813" />

<map id="" name="Image-Maps_72013121606424813">
<area shape="rect" coords="124,282,268,357" href="http://www.image-maps.com/" alt="" title=""    />
<area shape="rect" coords="1459,292,1603,367" href="http://www.image-maps.com/" alt="" title=""    />
<area shape="rect" coords="1758,1358,1760,1360" href="http://www.image-maps.com/index.php?aff=mapped_users_7201312160642481" alt="Image Map" title="Image Map" />
</map>

如果我删除拖动jquerry图像映射工作，反之亦然

If i remove the drag jquerry the image map works and vice versa

推荐答案

<img src="image.png" id="draggable" class="ui-widget-content" style="width: 100%;
        height: auto;" usemap="#Image-Maps_72013121606424813" />

<map id="" name="Image-Maps_72013121606424813">
<area shape="rect" coords="124,282,268,357" href="http://www.image-maps.com/" alt="" title=""    />
<area shape="rect" coords="1459,292,1603,367" href="http://www.image-maps.com/" alt="" title=""    />
<area shape="rect" coords="1758,1358,1760,1360" href="http://www.image-maps.com/index.php?aff=mapped_users_7201312160642481" alt="Image Map" title="Image Map" />
</map>

如果我删除拖动jquerry图像地图有效，反之亦然

If i remove the drag jquerry the image map works and vice versa

这篇关于可拖动的图像jquerry和图像映射不一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！