Site URL: https://www.ljathenaeum.org/mega-events-2
Hello!
Site page: https://www.ljathenaeum.org/mega-events-2
I am trying to create a page with an image and a series of linked texts. I want the image to change when I hover over each link.
I have added a code block with the texts, links, and images. I have also added the following Javascript:
<script>
/* Mega menu image change on hover */
$(document).ready(function(){
$('.mural-menulink').mouseover(function() {
myvar = this.id;
$("div.mural-menuimage").hide();
$('#div'+myvar).show();
});
});
</script>
<script>
$(document).ready(function(){
$('.mural-menulink').mouseover(function() {
myvar = this.id;
$("div.mural-main-image").hide();
});
});
</script>
The script properly hides the initial image on hover, and it also properly hides the links' images before hover, but it won't show the new image on hover. I don't know what I'm doing wrong! Any help or insight would be greatly appreciated. Or if there is another way to do this, that'd be great, too.
Thanks so much in advance!
Angela