Javascript HTML最初调整图像大小并更改位置_Javascript_Jquery_Html_Css_Imagemapster

Javascript HTML最初调整图像大小并更改位置

javascript jquery html css

Javascript HTML最初调整图像大小并更改位置,javascript,jquery,html,css,imagemapster,Javascript,Jquery,Html,Css,Imagemapster,在我的代码中，我在一个具有映射区域的div中有一个图像，根据从URL传递的变量，我希望图像最初在变量给定的区域上缩放。我将imagemapster用于交互式地图功能，虽然JQuery插件确实具有调整大小功能，但它只从左上角调整图像大小。我希望将图像调整到所选区域的位置，或者换句话说，初始区域缩放 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

在我的代码中，我在一个具有映射区域的div中有一个图像，根据从URL传递的变量，我希望图像最初在变量给定的区域上缩放。我将imagemapster用于交互式地图功能，虽然JQuery插件确实具有调整大小功能，但它只从左上角调整图像大小。我希望将图像调整到所选区域的位置，或者换句话说，初始区域缩放

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="jquery.min.js"></script>
<script src="imagemapster.js"></script>
<style type="text/css">
</style>
</head>
<body>
    <div style = "width:867px; height:1109px; border:0; overflow: auto; float:left;">
        <img name="front" src="zoo.png" style="max-width:100%;"  id="frontmap" usemap="#m_front" alt=""/>
    </div>
    <map name="m_front" id="m_front">
        <area id = "1" shape="poly" coords="56,45,57,257,468,46"  href="#" />
        <area id = "2" shape="poly" coords="519,166,697,324,699,186"  href="#" />
        <area id = "3" shape="circle" coords="397,533,224"  href="#" />
        <area id = "4" shape="rect" coords="647,730,725,851"  href="#" />
        <area id = "5" shape="rect" coords="118,765,280,855"  href="#" />
        <area id = "6" shape="rect" coords="271,862,683,1031"  href="#" />
    </map>
    <script>
        var i = "1";
        $(document).ready(function()
        {
            var image = $('#frontmap');
            image.mapster
            ({
                fillColor: '000000',
                fillOpacity: 0.8,
                staticState: false
            });
        });
    </script>
    </body>
</html>


演示
var i=“1”；
$（文档）.ready（函数（）
{
var image=$（“#frontmap”）；
image.mapster
({
fillColor:'000000'，
填充不透明度：0.8，
静态状态：false
});
});

我尝试过用CSS寻找解决方案，但大多数都没有达到我想要的效果，要么重新定位了图像，要么裁剪了区域。关于如何使图像最初缩放到我想要的区域，并且仍然可以通过div滑块查看图像的其余部分，您有什么建议吗？

您可以使用scrolleft和scrolltop滚动到需要对焦的位置。如本例所示：

$（'div'）。滚动顶部（200）
$（'div'）。向左滚动（220）

div{宽度：200px；高度：200px；溢出：滚动}

您可以使用scrolleft和scrolltop滚动到需要焦点的位置。如本例所示：

$（'div'）。滚动顶部（200）
$（'div'）。向左滚动（220）

div{宽度：200px；高度：200px；溢出：滚动}