Revision:
<div id="Div-A">
<div class="magnifier1">
<img id="myimage1" src="../images/2.jpg" width="600" height="400" alt="Shanghai">
</div>
</div>
<style>
#Div-A * {box-sizing: border-box; margin-top: 2vw;}
.magnifier1 {position: relative;}
.magnifier-glass1 {position: absolute; border: 0.2vw solid darkgreen; border-radius: 50%; cursor: none; width: 6vw; height: 6vw;}
</style>
<script>
function magnifyA(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/* Create magnifier glass: */
glass = document.createElement("DIV");
glass.setAttribute("class", "magnifier-glass1");
/* Insert magnifier glass: */
img.parentElement.insertBefore(glass, img);
/* Set background properties for the magnifier glass: */
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 4;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/* Execute a function when someone moves the magnifier glass over the image: */
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/* Prevent the magnifier glass from being positioned outside the image: */
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;}
/* Set the position of the magnifier glass: */
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/* Display what the magnifier glass "sees": */
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;
/* Get the x and y positions of the image: */
a = img.getBoundingClientRect();
/* Calculate the cursor's x and y coordinates, relative to the image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Consider any page scrolling: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
/* Execute the magnify function; specify the id of the image, and the strength of the
magnifier glass: */
magnifyA("myimage1", 4);
</script>
<div id="Div-B">
<div class="magnifier2">
<img id="myimage2" src="../images/3.jpg" width="600" height="440">
</div>
</div>
<style>
#myimage2 { border: 0.5vw solid #333; box-shadow: 0 0 2vw rgba(0,0,0,0.6); }
.magnifier2 {position:relative; margin: 1vw 20vw;}
.magnifier-glass2 {position: absolute; border: 0.2vw solid #333; border-radius: 50%; cursor: none; width: 6vw; height: 6vw;}
.magnifier-glass2:before {content:""; position: absolute; width: 1vw; height:2vw; border-radius: 3vw; background-color: #333; top:5.5vw; left:3vw; transform: rotate(-10deg);}
</style>
<script>
function magnifyB(img, zoom) {
var img, loupe, width, height, back;
img = document.getElementById("myimage2");
loupe = document.createElement("div");
loupe.setAttribute("class", "magnifier-glass2");
img.parentElement.insertBefore(loupe, img);
loupe.style.backgroundImage = "url('" + img.src + "')";
loupe.style.backgroundRepeat = "no-repeat";
loupe.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
back = 3;
width = loupe.offsetWidth / 2;
height = loupe.offsetHeight / 2;
loupe.addEventListener("mousemove", moveLoupe);
img.addEventListener("mousemove", moveLoupe);
loupe.addEventListener("touchmove", moveLoupe);
img.addEventListener("touchmove", moveLoupe);
function moveLoupe(e) {
var pos, x, y;
e.preventDefault();
pos = position(e);
x = pos.x;
y = pos.y;
if (x > img.width - (width / zoom)) {x = img.width - (width / zoom);}
if (x < width / zoom) {x = width / zoom;}
if (y > img.height - (height / zoom)) {y = img.height - (height / zoom);}
if (y < height / zoom) {y = height / zoom;}
loupe.style.left = (x - width) + "px";
loupe.style.top = (y - height) + "px";
loupe.style.backgroundPosition = "-" + ((x * zoom) - width + back) + "px -" +
((y * zoom) - height + back) + "px";
}
function position(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
magnifyB("myimage2", 3);
Mouse over the image:
Feel free to change the strength of the magnifier glass when initiating the magnify function.
<div id="Div-C">
<p>Mouse over the image:</p>
<div class="magnifier3">
<img id="myimage3" src="4.jpg" width="100%" height="auto">
</div>
<div class="magnifier3">
<img id="myimage3" src="5.jpg" width="100%" height="auto">
</div>
<p>Feel free to change the strength of the magnifier glass when initiating the
magnify function.</p>
<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
enlarge(image, 3);
</script>
</div>
<style>
.magnifier3{position: relative; margin: 1vw 20vw;;}
.magnifier-glass3{position: absolute; border: 0.2vw solid #000; border-radius: 50%; cursor: none; width: 6vw; height: 6vw;}
</style>
<script>
var images = document.querySelectorAll(".magnifier3 img");
var image;
for(var i = 0; i < images.length; i++) {
image = images[i];
if(image.complete) {
magnifyC(image, 3);
} else {
image.addEventListener("load", enableMagnify, false);
}
}
function enableMagnify(e) {
magnifyC(e.currentTarget, 3);
}
function magnifyC(image, zoom) {
var img, glass, w, h, bw;
img = image;
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "magnifier-glass3");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
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;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = cursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
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;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom)
- h + bw) + "px";
}
function cursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
<div id="Div-D">
<select id="CBFotos" autocomplete="off">
<option value="../images/3.jpg" selected>Foto 1</option>
<option value="../images/4.jpg">Foto 2</option>
<option value="../images/5.jpg">Foto 3</option>
</select><br><br><br>
<div class="magnifier4">
<img id="myimage4" src="../images/3.jpg" width="600" height="400">
</div>
<script>
document.getElementById("CBFotos").onchange = function() {
var comboBoxFotos = document.getElementById("CBFotos");
document.getElementById("myimage4").attributes["src"].value =
comboBoxFotos.options[comboBoxFotos.selectedIndex].value;
var magnifyElement = document.getElementsByClassName("magnifier-glass4")[0];
magnifyElement.parentNode.removeChild(magnifyElement);
magnifyD("myimage4", 3);
};
</script>
</div>
<style>
#Div-D * {box-sizing: border-box; margin: 1vw 15vw;}
.magnifier4{position: relative;}
.magnifier-glass4 {position: absolute; border: 0.2vw solid darkgreen; border-radius: 50%;
cursor: none; width: 6vw; height: 6vw;}
</style>
<script>
function magnifyD(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/* Create magnifier glass: */
glass = document.createElement("DIV");
glass.setAttribute("class", "magnifier-glass4");
/* Insert magnifier glass: */
img.parentElement.insertBefore(glass, img);
/* Set background properties for the magnifier glass: */
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 4;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/* Execute a function when someone moves the magnifier glass over the image: */
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/* Prevent the magnifier glass from being positioned outside the image: */
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;}
/* Set the position of the magnifier glass: */
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/* Display what the magnifier glass "sees": */
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;
/* Get the x and y positions of the image: */
a = img.getBoundingClientRect();
/* Calculate the cursor's x and y coordinates, relative to the image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Consider any page scrolling: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
// /* Execute the magnify function: */
magnifyD("myimage4", 4);
// /* Specify the id of the image, and the strength of the magnifier glass: */
</script>
<div id="Div-E">
<div class="magnifier6">
<img id="myimage6" src="../images/2.jpg" width="600" height="400" alt="Shanghai">
</div>
<button id="btn_E" onclick="toggle()">show/hide magnifying glass</button>
</div>
<style>
#Div-E * {box-sizing: border-box; margin: 1vw 15vw;}
.magnifier6 {position: relative; cursor: none;}
#magnifier-glass6 {position: absolute; border: none; border-radius: 50%; width: 6vw;
height: 6vw; display: none;}
#btn_E{display: block; margin: 0 auto;}
</style>
<script>
function magnifyE(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/* Create magnifier glass: */
glass = document.createElement("DIV");
glass.setAttribute("id", "magnifier-glass6");
/* Insert magnifier glass: */
img.parentElement.insertBefore(glass, img);
/* Set background properties for the magnifier glass: */
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;
/* Execute a function when someone moves the magnifier glass over the image: */
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/* Prevent the magnifier glass from being positioned outside the image: */
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;}
/* Set the position of the magnifier glass: */
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/* Display what the magnifier glass "sees": */
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;
/* Get the x and y positions of the image: */
a = img.getBoundingClientRect();
/* Calculate the cursor's x and y coordinates, relative to the image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Consider any page scrolling: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
function toggle(){
var block = document.getElementById("magnifier-glass6");
var btn = document.getElementById("btn_E");
if(block.style.display==""){
block.style.display="block";
btn.style.backgroundColor="lightblue";
}else{
block.style.display = "";
btn.style.backgroundColor='';
}
}
/* Execute the magnify function: */
magnifyE("myimage6", 3);
/* Specify the id of the image, and the strength of the magnifier glass: */
</script>
<div id="Div-F">
<div class="magnifier7">
<img id="myimage7" src="../images/4.jpg" width="600" height="400" alt="Shanghai">
</div>
</div>
<style>
#Div-F * {box-sizing: border-box; margin: 1vw 15vw;}
.magnifier7 {position: relative; cursor: none;}
#magnifier-glass7 {position: absolute; z-index: 3; border: 0.2vw solid black; border-radius: 40%;
cursor: none; width: 6vw; height: 6vw; display: none;}
</style>
<script>
function magnifyF(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/* Create magnifier glass: */
glass = document.createElement("DIV");
glass.setAttribute("id", "magnifier-glass7");
/* Insert magnifier glass: */
img.parentElement.insertBefore(glass, img);
/* Set background properties for the magnifier glass: */
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;
/* Execute a function when someone moves the magnifier glass over the image: */
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/* Prevent the magnifier glass from being positioned outside the image: */
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;}
/* Set the position of the magnifier glass: */
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/* Display what the magnifier glass "sees": */
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;
/* Get the x and y positions of the image: */
a = img.getBoundingClientRect();
/* Calculate the cursor's x and y coordinates, relative to the image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Consider any page scrolling: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
// Show the magnifier when hover the container
$('.magnifier7').mouseover(function(){
$('#magnifier-glass7').show();
});
// Hide the magnifier when leave the container
$('.magnifier7').mouseout(function(){
$('#magnifier-glass7').hide();
});
/* Execute the magnify function: */
magnifyF("myimage7", 3);
/* Specify the id of the image, and the strength of the magnifier glass: */
</script>
<div>
<div class="Div-G">
<div id="zoom">
<img src="../images/9.jpg" alt="flooding">
</div>
</div>
</iv>
<style>
.Div-G {width: 40vw; height: 30vw; margin-top: 5vw; background: #fff; display: flex; align-items: center;
justify-content: center; border: 0.5vw solid rgb(244, 254, 255);
}
#lens {position: absolute; border: 0.2vw solid green; border-radius: 50%; overflow: hidden;
cursor: none; box-shadow: inset 0 0 1vw 0.2vw grey;
filter: drop-shadow(0 0 0.2vw grey); }
#zoom img{ width: 40vw; height: 30vw;}
#lens > * { cursor: none; }
@media (max-height: 600px) {
#zoom img, .Div-G{ width: 30vw; height: 20vw;}
}
</style>
<script>
const lensSize = 300;
function magnifyG(id, zoom){
const el = document.getElementById(id);
const copy = el.cloneNode(true);
const lens = document.createElement("div");
lens.setAttribute("id","lens")
lens.style.width = lensSize + "px";
lens.style.height = lensSize + "px";
el.appendChild(lens);
el.getBoundingClientRect();
copy.style.zoom = zoom;
lens.appendChild(copy);
copy.style.width = (el.offsetWidth * zoom) + "px";
copy.style.heigth = (el.offsetHeight * zoom) + "px";
copy.style.position = "absolute";
el.addEventListener("mousemove", (ev) => {
ev.preventDefault();
ev.stopPropagation();
const pos = getCursorPos(ev);
lens.style.left = - (lensSize/2) + pos.x + "px";
lens.style.top = - (lensSize/2) + pos.y + "px";
copy.style.left = - (pos.x - el.offsetLeft) + (lensSize/zoom)*0.5 + "px";
copy.style.top = - (pos.y - el.offsetTop) + (lensSize/zoom)*0.5 + "px";
})
}
function getCursorPos(e) {
var x = (window.Event) ? e.pageX : event.clientX +
(document.documentElement.scrollLeft ? document.documentElement.scrollLeft :
document.body.scrollLeft);
var y = (window.Event) ? e.pageY : event.clientY +
(document.documentElement.scrollTop ? document.documentElement.scrollTop :
document.body.scrollTop);
return {x : x , y : y};
}
magnifyG("zoom", 4)
</script>