How To

Cara Membuat Zoom Image

Di bawah ini kita akan mempelajari cara membuat zoom image. Zoom image adalah gambar yang akan diperbesar ketika kita mengarahkan kursor ke gabar.

Zoom Image

Arahkan mouse ke gambar:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*atur ukuran lensa:*/  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*mengatur ukuran div hasil:*/  width: 300px;
  height: 300px;
}
</style>
<script>
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*buat lensa:*/  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/  img.parentElement.insertBefore(lens, img);
  /*hitung rasio antara hasil DIV dan lensa:*/  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*mengatur properti latar belakang(background) untuk hasil DIV:*/  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*menjalankan fungsi saat seseorang menggerakkan kursor ke atas gambar atau lensa:*/  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*dan juga untuk layar sentuh:*/  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*mencegah tindakan lain yang mungkin terjadi saat memindahkan gambar:*/    e.preventDefault();
    /*dapatkan posisi x dan y kursor:*/    pos = getCursorPos(e);
    /*hitung posisi lensa:*/    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*mencegah lensa diposisikan di luar gambar:*/    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*atur posisi lensa:*/    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*tampilkan apa yang "dilihat" oleh lensa:*/    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*dapatkan posisi x dan y dari gambar:*/    a = img.getBoundingClientRect();
    /* hitung koordinat x dan y kursor, relatif terhadap gambar:*/    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*pertimbangkan scrolling halaman apa pun:*/    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>

<h1>Image Zoom</h1>

<p>Arahkan mouse ke gambar:</p>

<div class="img-zoom-container">
  <img id="myimage" src="https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png" width="300" height="240">
  <div id="myresult" class="img-zoom-result"></div>
</div>

<p> Gambar harus ditempatkan di dalam container dengan posisi relatif. </p>
<p> Hasilnya bisa diletakkan di mana saja pada halaman, tetapi harus memiliki nama kelas "img-zoom-result". </p>
<p> Pastikan gambar dan hasilnya memiliki ID. ID ini akan digunakan saat javaScript memulai efek zoom. </p>

<script>
// Mulai efek zoom:
imageZoom("myimage", "myresult");
</script>

</body>
</html>

Buat Zoom Gambar

Langkah 1) Tambahkan HTML:
Contoh

<div class="img-zoom-container">
  <img id="myimage" src="https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png" width="300" height="240">
  <div id="myresult" class="img-zoom-result"></div>
</div>

Langkah 2) Tambahkan CSS:
Penampung harus memiliki pemosisian “relatif”.

Contoh

* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*atur ukuran lensa:*/  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*mengatur ukuran div hasil:*/  width: 300px;
  height: 300px;
}

Langkah 3) Tambahkan JavaScript:
Contoh

function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*buat lensa:*/  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/  img.parentElement.insertBefore(lens, img);
  /*hitung rasio antara hasil DIV dan lensa:*/  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*mengatur properti latar belakang(background) untuk hasil DIV:*/  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*menjalankan fungsi saat seseorang menggerakkan kursor ke atas gambar atau lensa:*/  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*dan juga untuk layar sentuh:*/  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*mencegah tindakan lain yang mungkin terjadi saat memindahkan gambar:*/    e.preventDefault();
    /*dapatkan posisi x dan y kursor:*/    pos = getCursorPos(e);
    /*hitung posisi lensa:*/    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*mencegah lensa diposisikan di luar gambar:*/    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*atur posisi lensa:*/    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*tampilkan apa yang "dilihat" oleh lensa:*/    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*dapatkan posisi x dan y dari gambar:*/    a = img.getBoundingClientRect();
    /* hitung koordinat x dan y kursor, relatif terhadap gambar:*/    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*pertimbangkan scrolling halaman apa pun:*/    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

Langkah 4) Mulai Efek Zoom:
Contoh

<script>
// Mulai efek zoom:
imageZoom("myimage", "myresult");
</script>

Hanifah Nurbaeti

Share
Tags: How Tohtml dan css