Note [L] plates 
Is there a fairly easy way to assign buttons to toggle (show/hide) an image on a layer in Hype.
e.g. We have an x-ray with multiple buttons that toggle labels / graphics when pressed. (Originally done by someone in Flash, and I’m now trying to remake in Hype.)
Thanks in advance.
You can use your buttons to trigger animations on different timelines.
I use that technique for lots of my work.
You would start with your Main timeline as the overall interface.
Then for example if you click on the “right clavical” it would launch a new timeline that you created probably named right clavical.
On that timeline you would have your animation that would highlight the portion of the X-ray that you wanted to view.
The overall recipe as it were,
Hype Buttons
Timeline actions (Pause, start timeline, goto time in timeline, continue etc)
Multiple timelines based on your buttons.
You could also launch scenes for each button but the timelines are very powerful tools.
Here is a 2 button example with the right clavical (sorry if I don’t know right from left not sure anterior or posterior view 
And a clear button.
clavical.hype.zip (204.3 KB)
Thanks Nick,
Will give that a try. Appreciate the example Hype file 
p.s. I’m not a medic so I don’t where any of those place are 
Sorry to jump on this thread, but I am also trying to Toggle an Image being shown, I have tried the above which works great when I click the button, however, this is not quite a toggle, as if you re-click the button it just repeats the timeline. I want to be able to click a button, fade in a title menu, then if I click again, it fades out.
I have created a new Javascript function called ToggleMenu ;
$(document).ready(Function(){
$("#menubutton").click(function(){
$("#title").Toggle(1000);
});
});
And I have assigned this to the MouseClick Action but nothing seems to happen ?, I have included JQuery in my Resource also.
Can anybody help please, I am a time served VB.Net developer but trying to get into Javascript and HTML 5 etc so would really appreciate your guidance.
Kind Regards
Ken Judge
The code you’re using will setup a handler on that item. But if you’re running this on a mouse click action, it can simply look like:
$( "#title" ).toggle();
You also need to make sure to include jquery in your head html.
Hope the toggle image function will one day be a non-coding option in a future version of Hype
Cheers Peter, I made a schoolgirl error, I thought I had JQuery in the header but turns out it wasn't, couldn't see the wood for the trees. 
Regards
Ken
Hi Jonathan–
I’m trying to accomplish something similar to OP and to JudgeyK, but running into the wall. I’ve got two timelines, and clicking on a symbol in one jumps over to another (where another symbol appears). The problem I have is how to effectively “close” the second timeline. I’ve tried assigning an action to the second symbol to start the Main Timeline, but I just get stuck. Is there a better way to show/hide symbols when clicking on an item?
In the end I went with using the timeline to (a) highlight chosen labels and (b) identify which button had been pressed. (See current work in progress file.)
xray-draft.hype.zip (404.3 KB)
Note: Sometimes a button’s display will get stuck in the “pressed” state after being pressed and while it functions okay, you have to refresh the page to make the pressed state disappear.
Update: You can replicate this by clicking on a button then dragging the cursor outside the button. This causes the button display to remain in the pressed state. (I’m using Safari 6.2.5, Mac OS X 10.8.5)
The behaviour you are seeing is afaik because your buttons are set to detect mousedown and mouseup with a click event within themselves (frame).
If you click down and then drag the mouse curser out of the buttons frame and then release the mouse up, the button will not detect the mouseup event. Which will leave the button in the pressed state.
I have added a javascript to reset the buttons for each button’s actions; on mouse up, mouse out and mouse drag.
The buttons have all been given the class “selectionButton” which the javascript runs on.
var allImageButtons = document.getElementsByClassName('selectionButton')
for (i = 0; i < allImageButtons.length; i++) {
allImageButtons[i].style.background = "black";
allImageButtons[i].style.color = 'white';
allImageButtons[i].style.borderColor = "#424242"
}
xray-draftWithButtonReset.hype.zip (474.4 KB)
This seems to prevent the behaviour you are seeing
Thanks Mark, appreciate your help
Thanks Mark, this is a great example of using "document.getElementsByClassName".
Cheers guys.
@peter_bright I liked the way you did the yellow highlight and wondered why you did not do it for the yellow circles.
I have not really done that sort of thing much but wanted to see how well it would work.
I am pretty sure I am not using symbols as best they can be used here. But I removed all the yellow circles and animated a couple of symbols to the same positions by having record on and moving to each label transition in the Labels timeline and dragging the yellow circle (symbol ) to the correct position and so on so forth. It was surprisingly easy to do.
The most important thing was to change the property action for the symbol’s animations from Ease in Out to instant. Which then makes the symbol animation jump to the position rather than float across.
xray-draftWithButtonResetTwoSymbolCircles.hype.zip (472.4 KB)
Wow Mark,
Thank you for taking the time to make those changes.
“I liked the way you did the yellow highlight and wondered why you did not do it for the yellow circles.”
I didn’t put the [L] (learner plate) in the title for nothing
I’m new to Hype and even newer to Javascript so still feeling my way around.
I was under a fairly tight deadline so was just happy to have it working!
I started with making an individual circle for each button (as you see now) then realised there was no way for folk to see which button they had pushed. When I made the yellow highlight box it dawned on me I could just move a single element to different positions. By then I had run out of time so I published the solution ‘as is’ - without the ‘draft’ graphics.
I have quite a number of simple Flash based animations that I need to convert to HTML5 and discovering Hype has been a lifesaver!
As a Hype Newbie I’m very grateful for your help and the contributions of other Forum contributors. I’m slowly learning about Javascript via online courses and hope to have a greater command of Hype as I get my hands dirty on easier projects like this. (Taking on board tips and tricks like yours.)
My next project is an interactive digital poster for a conference.
That’s due end of this week, so that’s another challenge