How do I use :hover on image map areas to show a new image?

Question

I'm pretty new to HTML and CSS and I'm attempting to make an image map with different images that show when you mouse over specific areas. I have looked at several examples but nothing quite works, though I'm sure I'm just missing something obvious. The image map itself works fine, but I don't know how to get the image to change on hover.

The current situation is in a jsfiddle here.

Something is definitely wrong here but I don't know what.

.misc {
  position: relative;
  width: auto;
  height: auto;
  background: transparent;
}

.misc:hover {
  position: absolute;
  background-image: url('https://i.ibb.co/ch71VJm/miscellaneous.png');
}

All the images are the same size. I essentially just want to replace the main image with a different one of the same dimensions when the mouse is inside the respective poly. Can I assign separate classes for the other images and show and hide those somehow? I am definitely willing to use JQuery for this, but I haven't had success there yet either, so it isn't included in the fiddle.

Thank you so much in advance for the lifesaving help.

EDIT: I have an updated fiddle with something else I'm trying in JQuery.

I don't understand why this works, and this doesn't:

$(".interactive").on("mouseenter", function(){
    ('.portfolio').attr("src", "https://i.ibb.co/s32mqsM/interactive.png");
});

$(".interactive").on("mouseleave", function(){
    ('.portfolio').attr("src", "https://i.ibb.co/F59xHXy/portfolio.png");
});

EDIT 2:

https://jsfiddle.net/rn56Ljdo/

I am in hell. Any tips appreciated.

Answer 1

You cannot specially do it for .misc class as it is a part of the image. You can change the source of the image with a hover using jquery HTML:

<img class="imagechange" src="https://i.ibb.co/F59xHXy/portfolio.png" usemap="#image-map" border="0" width=auto height=auto>

Javascript:

$('.imagechange').mouseover(function(){
$(this).attr("src", "https://i.ibb.co/ch71VJm/miscellaneous.png")})

Hope it helps!