Zoom in Zoom out using jQuery ImageMapster plugin

suhaas12...

SOLVED CLOSED ACTIVE ANSWERED
User: suhaas121
Posted: on Jan 28, 2019 11:47 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 6847
Sample Code: Download

Hi i need use zoom in and out for image which has hotspot . for some reason it is not working . please help

<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">
function zoomin() {
    var myImg = document.getElementById("pic");
    var currWidth = myImg.clientWidth;
    if (currWidth == 2500) return false;
    else {
        myImg.style.width = (currWidth + 100) + "px";
    }
}

function zoomout() {
    var myImg = document.getElementById("pic");
    var currWidth = myImg.clientWidth;
    if (currWidth == 100) return false;
    else {
        myImg.style.width = (currWidth - 100) + "px";
    }
}
</script>
<script type="text/javascript">
$(window).on("load", function () {
    $(document.body).click(function () {
        $("a").each(function (i) {
            //$(this).removeClass("active");
        });
    });
    var urlParam = function (name, w) {
        w = w || window;
        var rx = new RegExp('[\&|\?]' + name + '=([^\&\#]+)'),
        val = w.location.search.match(rx);
        return !val ? '' : val[1];
    }
    var useId = urlParam('Use_Id');
    $("#link" + useId).addClass("active");
    if (useId == '1' || useId == '2' || useId == '3' || useId == '4' || useId == '5' || useId == '6' || useId == '7' || useId == '8' || useId == '9' || useId == '10' || useId == '10A' || useId == '10C' || useId == '11' || useId == '12' || useId == '12B' || useId == '12C' || useId == '13B' || useId == '14' || useId == '15' || useId == '16') window.location.hash = 'one';
    $("#link" + useId + "A").addClass("active");
    if (useId == '17' || useId == '18' || useId == '19' || useId == '20' || useId == '21A' || useId == '22' || useId == '23' || useId == '24' || useId == '25' || useId == '150' || useId == '150-1' || useId == '151' || useId == '151-1' || useId == '152' || useId == '152-1') window.location.hash = 'two';
});
function linkClick(x) {
    $("[id^='link']").each(function () {
        var eleminterest = String($(this).attr('id'));
        $('#' + eleminterest).removeClass("active");
        $('#' + eleminterest).addClass("link");
    });

    document.getElementById(x).setAttribute("class", "active");
    //document.getElementById(x+'A').setAttribute("class","active");
    //document.getElementById(x+'B').setAttribute("class","active");
    document.getElementById(x + 'C').setAttribute("class", "active");
    document.getElementById(x + 'D').setAttribute("class", "active");
    document.getElementById(x + 'E').setAttribute("class", "active");
    //alert(x);
}

function getID(id) {
};
function getID2(id)
{ };
</script>
<script type="text/javascript">
$(window).on("load", function () {
    var urlParam = function (name, w) {
        w = w || window;
        var rx = new RegExp('[\&|\?]' + name + '=([^\&\#]+)'),
        val = w.location.search.match(rx);
        return !val ? '' : val[1];
    }

    var useId = urlParam('Use_Id');
    $('.mapimg').maphilight();

    if (useId != '') {
        var i = 0;
        $(".map" + useId).each(function () {
            if (i == 0) {
                var eleminterest = String($(this).attr('id'));
                //console.log(eleminterest);    
                //$('#' + eleminterest).mouseover();  //Old Code
                $('#' + eleminterest).click();
                i++;
            }
        });
    }
    // Resize Image to Fit

    $('.mapimg').each(function () {
        $(this).css("width", 603);
        $(this).css("height", 812);
    });
});

function linkClick(x) {
    var class_name = document.getElementById(x).className.split(' ');
    $("[id^=" + x + "]").each(function () {
        var eleminterest = String($(this).attr('id'));
        $('#' + eleminterest).removeClass("active");
        $('#' + eleminterest).addClass(class_name[0]);
    });

    document.getElementById(x).setAttribute("class", class_name[0] + " active");
    //alert(document.getElementById(x).className);
}

function getID2(id)
{ };
function getID(id) {
};
</script>
<body>
<nav class="navbar-fixed-top navbar-default">
<button type="button" onclick="zoomin()"> <span class="    glyphicon glyphicon-zoom-in"></span> Zoom In</button>
<button type="button" onclick="zoomout()"> <span class="glyphicon glyphicon-zoom-out"></span> Zoom Out</button>
<button type="button" onclick="document.location.reload(true);" value="Reload Page"> <span class="glyphicon glyphicon-repeat"></span> Reset</button>
<button type="button" onclick="myprint()"> <span class="glyphicon glyphicon-print"></span> Print</button>
</nav>
<p class="FM_Body" style="text-align: center; font-family: 'Courier New'; font-weight: bold;
    font-size: 10.0pt;">
    &#160;</p>
<p class="FM_Body" style="text-align: center; font-family: 'Courier New'; font-weight: bold;
    font-size: 10.0pt;">
    &#160;</p>
<div id="one" style="text-align: center;">
    <div class="main dragscroll">
        <img src="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg"
            id="pic" usemap="#image0Map" class="mapimg" />
    </div>
    <map name="image0Map" id="image0Map">
        <area shape="rect" coords="218,268,231,284" href="CHAP_55_30_00 TABLE 01.htm?Use_Id=2"
            id="2" class="map2" onclick="linkClick(this.id)" target="frameleft" alt="2" />
        <area shape="rect" coords="473,336,490,354" href="CHAP_55_30_00 TABLE 01.htm?Use_Id=2"
            id="2-1" class="map2" onclick="linkClick(this.id)" target="frameleft" alt="2" />
        <area shape="rect" coords="237,277,250,292" href="CHAP_55_30_00 TABLE 01.htm?Use_Id=3"
            id="3" class="map3" onclick="linkClick(this.id)" target="frameleft" alt="3" />
        <area shape="rect" coords="489,339,505,356" href="CHAP_55_30_00 TABLE 01.htm?Use_Id=3"
            id="3-1" class="map3" onclick="linkClick(this.id)" target="frameleft" alt="3" />
        <area shape="rect" coords="411,559,428,575" href="CHAP_55_30_00 TABLE 01.htm?Use_Id=4"
            id="4" class="map4" onclick="linkClick(this.id)" target="frameleft" alt="4" />
        <area shape="rect" coords="92,552,106,568" href="CHAP_55_30_00 TABLE 01.htm?Use_Id=4"
            id="4-1" class="map4" onclick="linkClick(this.id)" target="frameleft" alt="4" />
    </map>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Jan 30, 2019 06:16 AM
Modified: on Jan 30, 2019 06:17 AM
Report

Hi suhaas121,

As per the link http://jsfiddle.net/mt5pynn8/1/

Check code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('img[usemap]').mapster({
            fill: true,
            fillColor: '000000',
            fillOpacity: 0.2,
            stroke: true,
            strokeColor: 'ff0000',
            strokeOpacity: 1,
            strokeWidth: 1,
            fade: true
        });

        $('#btn-zoom-in').click(ZoomIn);
        $('#btn-zoom-out').click(ZoomOut);
    });

    function ZoomIn() {
        $("img").animate({
            height: '+=100',
            width: '+=100'
        }, 1000, function () {
            $(this).mapster('resize', $(this).width(), $(this).height());
        });
    }

    function ZoomOut() {
        $("img").animate({
            height: '-=100',
            width: '-=100'
        }, 1000, function () {
            $(this).mapster('resize', $(this).width(), $(this).height());
        });
    }
</script>
<div>
    <p>
        <button id="btn-zoom-in" type="button">
            Zoom In</button>
        <button id="btn-zoom-out" type="button">
            Zoom Out</button>
    </p>
    <img usemap="#veg" src="http://www.outsharked.com/imagemapster/examples/images/vegetables.jpg" />
    <map id="veg_map" name="veg">
        <area shape="poly" name="redpepper" coords="412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290, 367,296, 366,298,338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145"
            href="#">
        <area shape="poly" name="celery" coords="147,131, 156,143, 163,146, 177,129, 175,138, 177,138, 182,144, 180,164, 148,169, 139,171, 144,180, 141,198, 139,208, 140,222, 127,237, 148,216, 163,212, 166,216, 160,223, 163,233, 153,281, 135,318, 129,313, 122,322, 117,320, 99,301, 98,293, 85,300, 80,303, 74,300, 64,285, 76,272, 98,249,94,246, 72,261, 57,258, 62,251, 60,248, 47,228, 51,207, 71,195, 72,192, 38,202, 33,195, 30,173, 147,127"
            href="#">
        <area shape="poly" name="carrots" coords="175,74, 170,80, 154,85, 189,103, 190,111, 182,111, 179,98, 157,95, 142,111, 140,128, 38,169, 39,163, 74,143, 74,141, 56,135, 52,115, 79,111, 78,106, 63,98, 71,91, 81,88, 82,83, 91,75, 136,74, 174,70"
            href="#">
        <area shape="poly" name="asparagus" coords="224,25, 239,33, 244,36, 247,32, 327,23, 344,31, 343,36, 319,41, 315,42, 302,52, 272,61, 265,64, 270,73, 256,67, 248,60, 187,55, 192,58, 192,60, 184,64, 185,67, 176,67, 173,69, 142,67, 146,63, 135,59, 123,57, 142,44, 145,42, 143,39, 145,32, 207,38, 185,18, 212,19, 220,22"
            href="#">
        <area shape="poly" name="squash" coords="388,26, 391,38, 394,43, 395,46, 425,58, 427,68, 428,92, 386,125, 371,132, 374,124, 377,118, 374,105, 371,105, 370,107, 364,102, 368,97, 356,87, 353,89, 348,86, 322,87, 314,100, 314,102, 282,85, 278,84, 273,74, 272,68, 319,46, 346,31"
            href="#">
        <area shape="poly" name="yellowpepper" coords="237,222, 246,254, 255,291, 262,323, 271,322, 285,350, 306,352, 307,365, 298,374, 285,366, 270,375, 249,378, 244,384, 231,389, 215,373, 210,363, 203,357, 199,368, 184,361, 175,349, 162,356, 140,340, 143,305, 161,252, 168,224, 188,240, 194,223, 198,232, 213,226, 224,224,229,218"
            href="#">
        <area shape="poly" name="broccoli" coords="341,89, 342,91, 360,95, 353,100, 360,104, 364,109, 368,115, 369,112, 367,110, 376,111, 373,123, 367,128, 362,128, 359,131, 348,134, 345,137, 340,138, 341,148, 334,167, 323,172, 315,165, 315,162, 312,165, 311,172, 293,167, 292,141, 298,136, 307,134, 322,129, 328,128,329,116, 319,109, 314,104,317,93, 332,84"
            href="#">
        <area shape="poly" name="broccoli" coords="328,178, 338,197, 337,202, 330,215, 328,217, 325,228, 307,234, 305,239, 287,225, 287,216, 286,212, 282,216, 277,212, 277,185, 284,179, 310,175"
            href="#">
        <area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102"
            href="#">
    </map>
</div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Zoom in Zoom out using jQuery ImageMapster plugin

Company

Explore

Follow us

Contact Us