Trying to have images appear when I hover over a space on the homepage (think small, 2-frame animation)

Hey there!

So I'm going to try to explain this as best I can. I have this idea to give my website a more interactive feel that involves images appearing upon the mouse hovering over a portion of the home page. If you take a look, the website is currently just a static image as the entirety of the homepage. There are maybe a dozen items in the drawing that is the home page that I'd like visitors to "interact" with just by hovering the mouse over these spaces. For example, upon hovering over the book on the coffee table, the it opens and links to a page of artwork I've done. The small keyboard on the coffee table would lights up and have some keys pressed down, and then links to music I've made. Or even more simply and without links, hovering over the image of the cat causes her to lift her tail up.

I'm treating this somewhat like simple animation, where what is currently seen on the site is Frame #1 in my mind. In the example of the book on the coffee table, Frame #2 would be the sketch book laid open with a drawing in it.

My question is: how do I do this? I'm determined to make this work but lack the know-how to get this the way I want it. 

P.S. Maybe this is of importance but I got the idea for the site described above based on a code I used on a previous site of mine where hovering over one image caused another image to appear in the exact same place:

<img src="image 1" onmouseover="this.src='image 2'" onmouseout="this.src='image 1'"

I tried messing with this thinking it would do the trick but it only made this more difficult and I felt I wasn't headed in the right direction.

Thanks and I'd very much love some help!

Can you share site url?

Yes of course! Sorry I'm late with the reply

https://www.liampietraszewski.com/

I thought it was multiple images combined into one image. If it's just one image, you can google with the keyword Image Map, there are some free tools that allow you to achieve your requirement.

However

it will not work well on all screen sizes, when the screen size changes the click area will also change and will no longer be accurate

Hey thanks for your help!

I'm wondering if there is any other way to achieve the desired effect I described above with squarespace. I'm wondering if I've approached it in the wrong way.

Right now, I'm using the Basil site template and am using the full-screen banner for the illustrated image on the home page of my website.

Here's the website URL again just for convenience: https://www.liampietraszewski.com/

Thanks again!

There is no built-in feature to do this, would require custom code. The simplest idea I came up with is to insert some small images and move them over parts of the current large image. Then you can add links to these small images.