Retrive right Image by its ID after initiating function

Question

I wanna magnify some switching images after clicking some buttons. however, it seems that the magnified image is always the first one. Anyone can help me?

The problem should be started from the bottom of JS code, plese see attached code.

Also, I am wondering that if i need to merge magnify() into onclick function

Thanks for your patience, joe

I have tired to add magnify() within function, but seems not work as well.

function softtissue(){
  document.getElementById("img-imgmap201293016112").src="images/Cases/softtissue/32.jpg";
}

function bone(){
  document.getElementById("img-imgmap201293016112").src="images/Cases/bone/32.jpg"; 
}

function lung(){
  document.getElementById("img-imgmap201293016112").src="images/Cases/lung/32.jpg";
}

magnify('img-imgmap201293016112',3);

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*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};
  }
}

/*Qustion begain here*/
function activatemagnify(){
 var dis= document.getElementsByClassName("img-magnifier-glass");
	if( dis [0].style.visibility==="hidden"){
		dis [0].style.visibility="visible";
	}
	else{
		dis [0].style.visibility="hidden";
	}
	
}

function softtissue(){
	
	document.getElementById("img-imgmap201293016112").src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg";
}

function bone(){
	
	document.getElementById("img-imgmap201293016112").src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg/183px-Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg";	

}
function lung(){
		document.getElementById("img-imgmap201293016112").src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_%28454045%29.jpg/190px-Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_%28454045%29.jpg";

}
	magnify('img-imgmap201293016112',3);

{box-sizing: border-box;}

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

.img-magnifier-glass { 
  visibility: hidden;
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
}

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>
<div class="img-magnifier-container">
  <img id="img-imgmap201293016112" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg" width="600" height="400">
</div>
<br/><br/><br/><br/>
<div style="z-index:3">
<button id="softtissue" type="button" onclick="softtissue();return false" class="button">
  Soft Tissue</button>
  <button id="bone" type="button" onclick="bone(); return false;" class="button">
	Bone</button>
  <button id="lung" type="button" onclick="lung()" class="button">
	Lung</button>
<button onclick="activatemagnify()" type="button" class="button">
	Magnify</button>
  </div>
  </body>
  </html>

Answer 1

Main problem with your code is that the image containing the zoomed image is created on first load and not changed afterwards.

If you add an img.onload=function() to the image and update the zoomed image as soon as the base image has loaded, you get a working magnifying glass. You should also set glass.style.visibility="hidden" otherwise you have to click twice to show the zoom lense.

Here is the part of code that needs to be altered:

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  var prevImgs= document.getElementsByClassName("img-magnifier-glass");
  // remove the old lense ...
  if (prevImgs.length>0) {
    prevImgs[0].remove();
  }
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  console.log(img.src);
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.visibility = "hidden";
  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);

  ...
}

And instead of calling the magnify(...); once, call it whenever the image has finished loading:

document.getElementById("img-imgmap201293016112").onload = function() {
  magnify('img-imgmap201293016112', 3);
}

Here is a Fiddle showing the working magnifying glass.