HTML Initially resize image and change position

Question

In my code I have an image within a div that has map areas, and depending on variables passed from URL I want the image to be initially zoomed on the area given by the variable. I am using imagemapster for interactive map features, and while that JQuery Plugin does have a resize feature, it only resizes the image from the top left. I want the image to be resized to the position of the chosen area, or in other words, initial area zoom.

<!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>

I've tried to look for solutions with CSS but most of them did not perform what I wanted and either re-positioned the image or cropped the area. Any suggestion on how to get the image to be initially zoomed to the area I wanted it to be, and still have the rest of the image be viewable by div sliders?

score 0 · Answer 1 · answered Aug 10 '17 at 20:19

You could use scrolleft and scrolltop to scroll to the place where you want focus. Like in this example:

$('div').scrollTop( 200 )
$('div').scrollLeft( 220 )

div {width: 200px; height: 200px; overflow: scroll}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><img src="http://texel.is/wp-content/uploads/2015/10/Schaap-800x445.jpg"></div>

HTML Initially resize image and change position

1 Answers1