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.
OPS i was the wrong file open. Still silhouettes are hidden, right? because I see them in resources but I can not select them in the working window.
Ok not sure whats going on with that.
I have changed it to simplify it ( Hopefully)
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 have commented the code.
interatividadesMH3.hype.zip (569.0 KB)
So we only need the buttons and no other image hidden under them
1 Like
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.
Hi Mark again…
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.
Look: interatividadesMH3 MOD -AM.zip (549.3 KB)
Sorry, to chime in. This code block is incorrect so won't change anything. Understand that you are new. Here is the way to layout what you want.
var rectangleA = hypeDocument.getElementById("Rectangle_A");
var rectangleB = hypeDocument.getElementById("Rectangle_B");
rectangleA.style.color="#69619C";
rectangleB.style.color="#94515F";
1 Like
Hi,
I tried to apply the code here but ended up interfering with the remaining code and blocked all actions. I’m not a programmer and I’m learning a lot from you. Really I have many doubts and but I confess that I could not even understand the basics. For example, I could not understand the connection between the parts of the code. I commit to study better the code and try to understand how Mark did. I thank you all for help.
If all actions were blocked you probably entered a syntax error. ( mis-typed or not real code )
You will get an error being logged in the console. Do a google for browser console
Mark,
I want to thank you because you already helped me a lot. Much more than you think. These details, I want to implement the project, I will try to implement. I will also make the course the link you passed.
Good to know there are people like you!
Thank you very much! 
2 Likes
Hello Mark,
Good Morning!
I finished the project you were helping me and thank the code you did. I’m already getting better understand and even made a change to another scene and worked properly. 
I’ll send you the final aquiivo to send you as it became. I want to know if you could help me make the top bar stay the same color of the active group. I tried to do here but I did know not make it.
interatividade-Animais-final v3.zip (2.1 MB)
Can you help me?
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.
Mark, you’re the man!
Really I want to learn javascript. You make it sound so easy! Thank you very much. However, the second scene has different animals from the scene 1. This is the reason for another scene. Do you think I get apply the code, bar color, in the version I sent you before?
Lol,
Sorry it looked the same to me. Just the Hand , Human text changed.
One sec…
Ok so tha was fun.
Keeping on last version I added back the other buttons to scene 2.
There is code now that shows/hides the buttons as needed and also some to reset the scene between changes of selection.
This is all done in the humanos_hand() function
UPDATED: forgot to reset the text fields
interatividade-Animais-final MHV6.hype.zip (2.0 MB)
if you just want to keep your original final with three scenes then add lines like text_A.style.backgroundColor = element.style.backgroundColor;
like shown here
//-- MAKE CHANGES TO THE IMAGES AND TEXT DEPENDING ON THE COUNTER NUMBER
switch( window.clickNumber) {
case 1:
comp_A.style.backgroundImage = "url('${resourcesFolderName}/" + element.id + "')" ;
text_A.innerHTML = element.id.substring(0, element.id.length - 4);
text_A.style.backgroundColor = element.style.backgroundColor;
subText_A.innerHTML = element.title
break;
case 2:
comp_B.style.backgroundImage = "url('${resourcesFolderName}/" + element.id + "')" ;
text_B.innerHTML = element.id.substring(0, element.id.length - 4);
text_B.style.backgroundColor = element.style.backgroundColor;
subText_B.innerHTML = element.title
//-- RESET THE COUNTER
window.clickNumber = 0;
break;
}
2 Likes
Slight update above.
Thank you Mark. It was Fantastic!
I would appreciate see your work, you can give me links?
Most of my stuff I do for personal or for work so cannot really show you.
I have a lot of posts here though that have examples of things I have helped with like your problem which is one of the main reasons I am here… to help and expand my thinking…
1 Like
Hello Mark, how are you? Finally the book is ready for publication at the Apple Ibooks Store. We delayed because we were not able to finalize the registration for interactive sales with Apple. Our editor is Brazilian.
Now, when everything was finally going well, the file gave an ITMS-9000 ERROR. I’ll attach the image here. If you can guide me I do not know how to correct.
Look, as I promised I put the credits on your contribution on the worksheet.
See the cover of the book how beautiful it was.
3 Likes
Thank you. thats really cool. 
The cover looks beautiful.
As to the error.
It say it it’s self the path is to long. Or rather the number of Characters exceeds 180.
My suggestion is to try and shorten the name of the project.
to something like
int_Animal_Well_Mod_final_v4