Sorry could not resist in making some changes and getting rid of some duplication. ( not all)
I got rid of the third scene and the JS for it. And renamed scene two.
Both large selection images are both on scene two with opacity set to 0.
All Humanos and Mao image have a class list of “Humanos selectonElement” and "Moa selectonElement"
The Humanos actually has “Moa selectonElement” and the Moa has “Humanos selectonElement” for the very large ones on scene 2.
Al the other Humanos and Mao have their own name as expected.
The reason for this switching around the classes for the large images is because when you click either the small images or the images on scene one we can simply iterate over all the elements with either Humanos or Mao and hide or show them. So the large images on scene two need to be in reverse of the show or hide of the small images and scene 1 images.
You can click the selection in scene 1 and it will run a second JS function that works out which elements was clicked.
It will then hide or show all the Humanos or Mao in scene two.
The cinza elements by hiding behind the small Humanos and Mao element on top.
I removed the text background elements at the top. This means we can just colour the text background.
interatividade-Animais-final MHV5.hype.zip (1.3 MB)
Slight update forgot to setup the Animals Scale vs Hand and Animals Scale vs human text.
These now work the same as the Large images with the reverse class name.