Di Bawah ini kita akan mempelajari cara membuat kaca pembesar gambar(Image Magnifier Glass) menggunakan CSS dan Javascript. Image Magnifier Glass adalah suatu teknik untuk memperbesar gambar dengan menggunakan pantulan kaca pembesar, jadi gambar akan berubah lebih besar ketika kursor di gerakkan
Image Magnifier Glass
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-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Atur ukuran kaca pembesar:*/ width: 100px; height: 100px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*buat kaca pembesar:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*masukkan kaca pembesar:*/ img.parentElement.insertBefore(glass, img); /*mengatur properti latar belakang untuk kaca pembesar:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*Eksekusi fungsi saat seseorang menggerakkan kaca pembesar di atas gambar:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*dan juga untuk layar sentuh:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(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); x = pos.x; y = pos.y; /*mencegah kaca pembesar berada di luar gambar:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*atur posisi kaca pembesar:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*tampilkan apa yang "dilihat" oleh kaca pembesar:*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "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 pengguliran halaman apa pun:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Contoh Image Magnifier Glass</h1> <p>Arahkan mouse ke gambar:</p> <div class="img-magnifier-container"> <img id="myimage" src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg" width="600" height="400"> </div> <p> Jangan ragu untuk mengubah kekuatan kaca pembesar saat memulai fungsi perbesaran. </p> <script> /* Mulai Fungsi Perbesaran dengan id gambar dan kekuatan kaca pembesar:*/ magnify("myimage", 3); </script> </body> </html>
Buat Image Magnifier Glass
Langkah 1) Tambahkan HTML:
Contoh
<div class="img-magnifier-container"> <img id="myimage" src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg" width="600" height="400"> </div>
Langkah 2) Tambahkan CSS:
Container harus memiliki pemosisian “relatif”.
Contoh
* {box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Atur ukuran kaca pembesar:*/
width: 100px;
height: 100px;
}Langkah 3) Tambahkan JavaScript:
Contoh
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*buat kaca pembesar:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*masukkan kaca pembesar:*/
img.parentElement.insertBefore(glass, img);
/*mengatur properti latar belakang untuk kaca pembesar:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*Eksekusi fungsi saat seseorang menggerakkan kaca pembesar di atas gambar:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*dan juga untuk layar sentuh:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(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);
x = pos.x;
y = pos.y;
/*mencegah kaca pembesar berada di luar gambar:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*atur posisi kaca pembesar:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*tampilkan apa yang "dilihat" oleh kaca pembesar:*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "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 pengguliran halaman apa pun:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}Langkah 4) Mulai Fungsi Magnify
Contoh
<script>
/* Mulai Fungsi Perbesaran
dengan id gambar dan kekuatan kaca pembesar:*/
magnify("myimage", 3);
</script>