I'm trying to make an image {image 7} appear when hovering over {image 5} while also making {image 8} appear when hovering over {image 6}. It seems to work fine when using the hovering only once, but when I try to do it twice (make different images appear when hovering on different images), it doesn't work. I think that it is because i don't know how to call each set of images on script properly. I'm pretty new at this so any help would be super appreciated. Thank you in advaced!
p.s. I will use the hover event for diferent elements several times in my webpage, not just twice.
here is my html:
<div class="row1">
<div>
<div class="hover-title">
<a rel="history" href="enlightened-type" class="image-link" id="what" onmouseover="showImg()" onmouseout="hideImg()">{image 5 scale="19"}</a>
</div>
<div class="hover-image">
<div id="what1" style="visibility: hidden;"> {image 7 scale="27"} </div>
</div>
</div>
<div>
<div class="hover-title">
<a rel="history" href="enlightened-type" class="image-link" id="young" onmouseover="showImg()" onmouseout="hideImg()">{image 6 scale="16"}</a>
</div>
<div class="hover-image">
<div id="young1" style="visibility: hidden;">{image 8 scale="12"} </div>
</div>
</div>
& this is my script:
<script>
var hoverImg =
document.getElementById("what1");
document.getElementById("young1");
function showImg(x) {
hoverImg.style.visibility = "visible";
}
function hideImg(x) {
hoverImg.style.visibility = "hidden";
}
</script>
I think you should add the sender to the event handler and edit the related element
In html you should do this
<a rel="history" href="enlightened-type" class="image-link" id="what" onmouseover="showImg(this)" onmouseout="hideImg(this)">{image 5 scale="19"}</a>
And in Js
function showImg(x) {
document.getElementById(x.id + "1").style.visibility = "visible";
}
function hideImg(x) {
document.getElementById(x.id + "1").style.visibility = "hidden";
}