Hovering one item to display the child in another div

March 10, 2022

I ran into a problem and couldn’t find an easy solution.
I have a couple of tags which have an img assigned to them and I would like that their respective image is displayed in another div, when I hover over it or click the tag.
At the moment the images will be shown, but at the location of the hover tag.

Jquery or Js is also an option 🙂

EDIT
As of now the IMG is shown in the left box and I want to be displayed inside the right box on hover. Preferable would be if it would also work with onClick so it stays when I move my mouse away.

There are multiple images (about 100 different ones)

I will provide some code below

.container {
  display: flex;
  width: 100%;
  height: 500px;
}

.left {
  width: 50%;
  height: 500px;
}

.right {
  width: 50%;
  height: 500px;
}

figref:hover img {
  visibility: visible;
  display: block;
  box-shadow: 2px 2px 4px black;
}

figref img {
  display: none;
}

<div class="container">
  <div class="left">
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
    <figref idref="f0001">
      FIG. 1A <!--ATM When I hover this the Image is displayed below-->
      <img class="normal" src="./images/imgf0001.png">
    </figref>
    <figref idref="f0002">
      FIG. 2A 
      <img class="normal" src="./images/imgf0002.png">
    </figref>
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
  </div>
  <div class="right"> <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>

>Solution :

oen way can be to :

search for the img inside the figRef element
copy the img in the innerHTML of right panel

document.querySelectorAll('figref').forEach(function(fig) {
fig.addEventListener('mouseover', function (e) {
  var target = e.target || e.srcElement;
  document.querySelector('.right').innerHTML = target.querySelector('img').outerHTML;
});
});

.container {
  display: flex;
  width: 100%;
  height: 500px;
}

.left {
  width: 50%;
  height: 500px;
}

.right {
  width: 50%;
  height: 500px;
}

figref img {
  display: none;
}

<div class="container">
  <div class="left">
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
    <figref idref="f0001">
      FIG. 1A <!--ATM When I hover this the Image is displayed below-->
      <img class="normal" src="./images/imgf0001.png">
    </figref>
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld   
   <figref idref="f0002">
      FIG. 2A <!--ATM When I hover this the Image is displayed below-->
      <img class="normal" src="./images/imgf0002.png">
    </figref>a
  </div>
  <div class="right"> <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>