Php Zoom Picture

Kmrn tmn minta tlg suruh buatin zoom gambar dengan event scroll mouse, eh Alhamdulillah pas ane sersing2x sm om gugle akhirnya dapet jg .. ini sederhana jd dr 4 gambar ane buatin satu gambar aja biar gak makan space

Nah kurang lebih ky diatas tampilannya .. berikut source codenya :

title>Mapbox Example Maps /title>
style>
.mapwrapper {
  margin: 20px auto;
  width: 500px;
}

#viewport, #viewport2 {
    width: 900px;
    height: 500px;
    cursor: move;
    overflow: hidden;
}

.mapwrapper {
    position: relative;
}

.map-control {
    position: absolute;
    top: 50px;
    right: 10px;
    background: url(images/map-control.png) no-repeat;
    height: 63px;
    width: 100px;
}

.map-control a {
    height: 18px;
    width: 18px;
    display: block;
    text-indent: -999em;
    position: absolute;
    outline: none;
}

.map-control a:hover {
    background: #535353;
    opacity: .4;
    filter: alpha(opacity=40);
}

.map-control a.left {
    left: 39px;
    top: 22px;
}

.map-control a.right {
    left: 79px;
    top: 22px;
}

.map-control a.up {
    left: 59px;
    top: 2px;
}

.map-control a.down {
    left: 59px;
    top: 42px;
}

.map-control a.zoom {
    left: 2px;
    top: 8px;
    height: 21px;
    width: 21px;
}

.map-control a.back {
    left: 2px;
    top: 31px;
    height: 21px;
    width: 21px;
}
/style>
script src="module/mapbox/jquery.min.js">

script src="module/mapbox/jquery.mapbox.js">
script src="module/mapbox/jquery.mousewheel.js">
/head>
body>

div>
       
            form action="?act=10&kphbtn=001" method="post" name="frmsearchsdh">
            Berdasarkan:select name="cari">
                option value="rph">RPH 1:10.000

     option value="bkph">BKPH 1:25.000
     option value="kph">KPH 1:100.000
            /select>
                input type="text" name="search" id="search" value="">
                input type="button" value="Search.." onclick="searchsdh();" />
            /form>
        /div>
       div class="right">
p>

RPKH 2013-2022 Wilayah Sukabumi

   
   div id="viewport">
      div>
         
       img src="module/mapbox/images/1.jpg" alt="" width="700" height="700" />
      /div>
      div style="height: 1097px; width: 1286px;">
          img src="module/mapbox/images/1.jpg"alt="" />
          div class="mapcontent">
             
           /div>
      /div>
      div style="height: 1794px; width: 2104px;">
          img src="module/mapbox/images/1.jpg" alt="" />
           div class="mapcontent">
             
          /div>
      /div>
      div style="height: 2492px; width: 2922px;">
           img src="module/mapbox/images/1.jpg" alt="" />
           div class="mapcontent">
             
             
    
          /div>
      /div>
    /div>
/div>

/div>
script type="text/javascript">
    $(document).ready(function() {
        $("#viewport").mapbox({mousewheel: true});
        $("#viewport2").mapbox({
            layerSplit: 8 //smoother transition for mousewheel
        });
        $(".map-control a").click(function() { //control panel

            var viewport = $("#viewport2");
            // this.className is same as method to be called
            if(this.className == "zoom" || this.className == "back") {
                viewport.mapbox(this.className, 2);//step twice
            }
            else {
                viewport.mapbox(this.className);
            }
            return false;
        });
    });
/script>

Untuk File js nya bs searching aja di google.
    Selamat Mencoba.. Good luck :)