Substitution of fragments of images, how to implement?

Question

JavaScript

Hello . Happy New Year everyone. Most of them are still celebrating, but since the evening of December 30 I have been sitting and thinking how to implement such a task: There are 2 pictures, essentially the same. They can be in SVG or JPG , it doesn't matter. On one house without light in the windows. The other image has a light. You need to do this - when you hover over a floor/window, all windows on the floor will be lit. (that is, part of the first image is replaced by part of the other). I liked the implementation on this site: dom-renaissance.ru/plans/korpus1/section4
My task is somewhat simpler, but I would like to implement it in the same way as theirs. The problem is that I am new to programming. I've been learning web development for less than a year. I learned the basics, but so far there is not enough practice to study other sites and understand how their logic works.
I ask you, the Society of those who can and know, help the newcomer by pointing out at least that it is necessary to google on this topic. Plugins, libraries, ready-made solutions, or just the very essence of how to write it in pure JS (one theory is enough)
PS: Thank you in advance for your answers. Happy Holidays!)

Answer 1

We make 2 pictures, one background, the other hover, when hovering we change it to hover.
We lay out the blocks on the floors.
Example block 1st floor:
background the desired coordinates of the image, on hover change background-url with light

Answer 2

You can use the canvas tag and JavaScript