Let’s say that I have an image of a body or hand and I want the user to be able to click on a section of the body or hand and have that send them to another part of the app or site. Is this possible to do?
Is there a way that I can get the parts of the hand to glow or highlight when they are selected?
Does anyone know? I’d appreciate the help.
Hi,
Yes this is possible but dependent on the image.
You could break the image into parts or overlay sections with another element.
Basically you need to create zones that respond to the users interaction.
Are you able to post one of the images so we can look at what may be a good option.
So here is a simple example.
I have created zone over the fingers and palm of the hand using buttons.
The buttons actions,
Normal = no colour, no border.
Hover = colour, border 2px, blur 6px - Filters = blur 7.3px, saturation 11.0
Pressed = colour, border 4px, blur 6px - Filters = blur 6.4 px, saturation 1.0
All buttons have an on click action to go to a scene.
hand-1.hypetemplate.zip (1.4 MB)
Omg that’s exactly what I’m trying to do!
Thank you so MUCH!!!
I appreciate it.
Here is the image that I’m trying to section out.
I thought about creating different images for each section, but wasn’t sure if that was the correct thing to do. I think I’ll have to create an overlay to get the same effect that you demonstrated.
Right?
.
Have a look at this.
This shows two ways of doing this. Both use cut outs of the images. One method in buttons and another just the image.
Both methods use the image or button as an overlay over the background image.
I used Pixalmator to copy the image parts.
( Pixalmator has a brilliant feature where you can select an area and convert it to a shape. This means you can adjust things really easy )
For the Button images I then pasted them into a Hype project, exported the Project and then used its resource folder to get the Images for the Real project. ( Because you have to choose them not drag drop or paste)
Where I used Images for the Males legs I could just paste them in from Pixalmator.
I think it would be easier to just use images and my Hover code. The Images first have the Saturation,Hue and Opacity set. And then the Javascript adds on hover Listeners on to the images. Which when triggered will toggle Opacity.
I wanted pairs of image parts to show when one is hovered so each pair has the same class name which the JS looks for.
The project below most likely has a lot of duplicate image files where I was playing around. So when doing yours, work out how you want to do it and do it once.
I have not added any on click action to go to scene on the buttons or images but that is a standard feature within hype…
Hope this helps
BodySmall5.hypetemplate.zip (976.6 KB)
Hi Elanie,
As Mark’s template shows you just create buttons and ‘overlay’ them over the parts that you need highlighted.
Here is a template with an example just create more buttons (“hot zones”) and away you go!
body-click.hypetemplate.zip (121.5 KB)
**I just re-used Mark’s technique to show you with the picture you supplied.
D
The later one shows a couple of different methods that give you a bit more control. 
Your first method…works perfectly. I love it.
Thank you! I’ll post a preview when I’m done with it all.
