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>oen way can be to :
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments