Search code examples
javascripthtmlcssgoogle-sites

On-click event not opening in same tab/window on a mouseover zoom image

I am trying to open a web page on same tab/window on-clicking a zoom-over image. I tried _self but it is not working. Also, I am using Google Sites to develop a simple website. It seems easy but not getting the answer and I'm unable to solve the issue. Attaching my code.

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

.zoom[href] {
  padding: 2px;
  transition: transform .3s;
  width: 150px;
  height: 81px;
  margin: 0 auto;
  overflow: hidden;
}

.zoom:hover {
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.3); 
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
</style>
<script type="text/javascript">
var windowObjectReference = null; // global variable
function openRequestedPopup(url, windowName) {
  if(windowObjectReference == null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, windowName, "_self");
  } else {
    windowObjectReference.focus();
  };
}
</script>
</head>
<body>
<div class="zoom">
<a href="https://www.google.com" onclick="openRequestedPopup(this.href, this.target); return false;">
<img src="https://via.placeholder.com/250" alt="Our Performance" styles="width:100%">
</a>
</div>
</body>
</html>

This is my current situation: enter image description here

And this is what i am expecting:

enter image description here

Solution

  • My understanding is that you intend to open a popup inside your page when the user is clicking on it. This can be achieved as follows:

    1. Create an iframe

    You will need to create an iframe like this:

    <iframe id="mypopup" style="display:none;"></iframe>

    2. Create a function that opens it with a URL

    function openIFrame(url) {
    let myPopup = document.getElementById("mypopup");
    mypopup.style.display = "block";
    mypopup.src = url;
}

    3. Have an onclick that executes it

    Something like

    onclick="openIFrame(this.href); return false;"

    in your anchor.