Hey guys. I'm in need of some help. I need the selected hover button to be activated until when I click on another one and so change to the new one. I've tried in several ways but I couldn't.
If you can help thank you.
EZY-colorv2 - cópia.zip (2.5 MB)
Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.
you can not use Hypes builtin states to control them customized.
so you've got to set up those yourself. plenty ways to rome ... for example event delegation would be more elegant, but this one takes some Hype-UI-Support, so it may be a good way to go ...
keepState.hype.zip (19,4 KB)
Thanks for the reply h_classen
Hans-Gerd Claßen,
but, is it possible to use png images instead of colors as in the example I sent?
Could you explain to me how to do it in this case?
just change the data-attributes names and values to backgroundimages, paths and the corresponding lines in the script
A couple of things.
I generally try to never use the button 'hover' and 'pressed' to change an image.
I find it can get stuck. I find it best to use the on mouse over/out actions and then use the Hype API to change the background image.
Now also to do that you need to use an element other than an image.
In this example I just give a rectangle a background image instead of a colour fill.
( also gave the top corners a radius )
@h_classen code works well and relies on the mouse over/out actions.
So sticking to his code and using attributes we can set a initial image for the buttons to revert back to on mouse out, an image to change to on mouse over and a main image to switch comp_A to
data attribute name. : file name
data-initbackgroundimage = mouse out button image file name ( initial image )
data-backgroundimage = mouse over button image file name
data-mainimage = comp_A new image name
I do not use any of you old code and have not put any text element changes in.
But you should be able to do something similar using attributes/values to change any text
--
mhTest1.hype.zip (1.5 MB)
I would like to thank you both for your help. I'm using your MarkHunte solution and it's working perfectly. Thanks again!!!!
This forum is amazing precisely because it has people like you!
Its really @h_classen solution, I just set it up to how you needed it.. 
Mark, could you help me one more time?
See, I need to create 5 environments, so I intend to create 5 scenes. However, when I create a new scene the script no longer works.
I tried to modify some of the codes but I don't know where I'm going wrong. 
EZY-Color-v4-outros-elementos-TEST.zip (844.0 KB)
You have just posted my example back unchanged but with a different name.
--EDIT * Oops, I still had the old one open, my bad )
Before I fully answer, are the scenes supposed to retain their individual selections ?
I did not download your file, but if you speak about multiple scenes you'd need to query the elements in the current scene instead of the document.
Hype provides the current sceneID, so you can get via document.getElementById( hypeDocument.currentSceneId())
Yep that's mostly what it was, had it working with that changed and also add class names on the comp element before I realised I had downloaded the new project but clicked on the wrong one (the older example) which I then just added scenes and changed the code.
sigh..
Hi Mark, add all scenes here
EZY-Color-v5-outros-elementos-TEST.zip (1.8 MB)
I think I get it, but I'm still learning javascript and Hype and it looks like I still have a long way to go.
I appreciate all the help. Tks h_classen and Mark
I edit the above post,
I downloaded the file but did not realise I clicked on my older one, so thought you sent me the old one back with no changes. Proceeded any way to add scenes and change the code, as I was in the middle of editing the posting with the fix I realised my mistake.
Any way I have now adjusted the new one.
First we need to only get the buttons for the current scene.
We add the line :
var thisScene = hypeDocument.getElementById(hypeDocument.currentSceneId())
and change:
var buttons = document.querySelectorAll('.button');
to
var buttons = thisScene.querySelectorAll('.button');
And while we are at it lets give all the comp elements the class name comp_ and then change:
var comp_A = hypeDocument.getElementById('comp_A')
to
var comp_ = thisScene.querySelector('.comp_')
we also change the line
let selectedEl = document.querySelector('.button[data-selected]');
to
let selectedEl = thisScene.querySelector('.button[data-selected]');
So above we are only dealing with elements on the current scene.
I removed the number 2 from any attribute names and button class names . The Attribute name ALL need to stay the same across scene buttons. We do not use IDs. ALL buttons have the same class name button
All of the above allows us to just use one Hype function without having to duplicate for each scene.
Each scene now point to > SelectDisplay()
You will also notice a (hack) function named Selected().
This runs on all scenes On Prepare For Display
The intent of this function is to retain each scenes selection across scene backward and forwards.
We also add the line
hypeDocument.customData[hypeDocument.currentSceneId()] = element
in SelectDisplay() to set globally which button was selected in each scene. Which is then accessed in Selected()
If you do not need this last bit to happen just remove the On Prepare For Display*
EZY-Color-v5-outros-elementos-MHv2.hype.zip (1.8 MB)
--
Also the scene selection buttons.
I would change them to use code for the mouse over/out as we have done with the selection buttons.
As I said above if you use the UI button hover in Hype they will not work as expected and stick.
cool 
3 posts were split to a new topic: How to make scenes responsive on Mobile
Please see split post where you new questions can be answered.