This is a picture that I'm building. I have managed to make the buttons to get the right image. Each animal will have a design in comparison to the human that is fixed. I could make a list below where you choose each and the silhouette changes to the correct animal. But I would like to make two fields, A (left side) and B (right side) where clicking on a first animal would occupy the A and click on another B. I could not get a solution to this because it would have to have two sides A and B dynamic content (or show the correct scene). I'm reading and rereading manuals html5 but could not do it. As I said I'm noob in programming but I believe i can do it here in the Hype.
This uses a global variable to count the number of clicked animals.
The idea is if the click count is 1 then A gets filled, if the number is 2 then B gets filled and the click count goes back to 0.
Wow, it’s amazing and it worked almost like I want. I need however that each click on the circle below that shows the silhouette of the animal and not the image of the circle / button. I tried to link another image but did not work. I’m trying here but if you can help me more it’ll be very grateful.
I will send you the screens of two situations. An animal is small and occupies the empty side. The other animal is huge, so it needs to be transparent to stand in front of the human. On the other screen both are great and need to stay in front and another behind the human. At the same time, by selecting the animal silhouette changes and the name, the text background color and text as well. They are in the correct scale in the example. I do not know if this is possible.
I have given each button an id that matches the correct image file name.
Each button also has the Alternate /title text filed filled in with the latin names.
The JS also uses the id and title to fill in the text fields.
Wow, you got to do as I thought. I will study how did you learn and use in other animals, 78 in total. May I ask just one more thing, how do I get the button is in the correct color when the animal is selected. It is colored in case.
I think I’m very same noob. I could not figure out how you did to hide the images that appear after you click. Can you explain me please? Another question is why the small animal, mouse, as is the B side it on top the human and the A side it is in the clear, how do I correctly position?
One is to make your buttons with elements; text, images. Group the elements and set the groups background colour to grey. Have the colour image below the grey one and use JS to change background colour and opacity of the images as needed.
You will need JS to work out which buttons should be selected. This can be complex if you do not know much JS.
There are examples of this already on site…
Because your project is already under way I don’t want to go back and do all the buttons.
So as an alternative I have just thrown together a very rough idea. It is not ideal and not how I would do this mostly if I was starting from scratch.
This one does not allow for a animal to be selected for A and B, they can only appear in A or B.
I simply placed the alternative images under each button and gave each the id of the latin name. and all the same class name.
When a button is clicked it’s ID is added to an array . This array is always limited to two items.
All alternative images are sent backward using z-index
The JS then gets both of the two buttons that are represented in the array and get their alternative title and brings the corresponding alternative images with them as i their id forward.
Very interesting what you said. So I can group each animal and use the own group background to put the color when selected. As the project is in the beginning I will try to do so, leave the circle with the photo and text separately from the background. My biggest problem at the moment is to understand, in the template that you sent, viewing the position of items that are hidden to get position them correctly. Really I could not understand how it works so far. I can not see the hidden elements, and that is frustrating.
and improved positioning of the elements. But yet they are still misaligned. Could you explain me how do I SEE where is where is made the change of the elements A and B so I try to position them better?
Oh No - - – - - I’m going crazy, I can not find it in the software !!!
I managed to unlock the A and field B to correct the location. I have noticed that some images will be misaligned anyway because much difference in size and it hinders.
First I recreated the first three buttons in the original form. Only because where you originally set the hover and press to new images was interfering with the changes. The new buttons only deal with Normal and leave hover and pressed alone.
The buttons Saturation is set to 0%. This makes the grey.
No when the buttons are clicked all Buttons are returned to grey if they are not in the window.currentAnimals global array.
If they are they are set to 100% saturation which will make them colour.
I open here and think I understand what you said. I will try to apply in a new file, which would be the basis for the final file. Once able to mount the basic structure with the correct files send to you for you to analyze, if you can, to see if I’m doing the right way.
So, I need the box rectangle, where the animal’s name is, change to the same color as the button background.
I tried to insert this code but nothing happened. I identified the ID rectangles and nothing. Really could not understand the basics of code. But with the help of his comments I understood much more.
var Rectangle_A = hypeDocument.getElementById (“Rectangle_A”) style.color = “# 69619C.”;
var Rectangle_B = hypeDocument.getElementById (“Rectangle_B”) style.color = “# 94515F.”;
Even if he had worked it will not work because each group of animals have different colors (the first 14 are pink, next 5 are green, then purple, orange, magenta, blue, gray …)
already modified the image and the text of the first two buttons permanently, see how it was.