Add button over an image

[Deuce]

Hello!
I am just starting with this app creating program.

I am still in the discovering phase.

Could anyone please help me out.

How can I add a button over an image so if someone is using the app and touches a part of the image he actually activates the hidden button.

Kind of an interactive image basically where there is a hidden button on the image.

Deuce

[moon]

Hi Deuce,

What do you mean by "Touches a part of the image" ?

Please make it clear enough.

Is it about: something should happen when the user click in somewhere within a button area?

I know the situation and learned (from the community) a lot in only one week, therefore happy to help.

Sometimes a screenshot helps a lot.

M

[Hossein Amerkashi]

@Deuce,

You can change property of components to visible or hidden.

You can have several components (e.g. button) that are initially set to hidden. Assign image as background image of the button.

Then on the click event of other buttons, show/hide other buttons.

Don't forget to checkout AI tutorials here: http://appinventor.mit.edu/explore/ai2/tutorials.html

-Hossein.

http://AppyBuilder.com

   

[SteveJG]

You cannot place a Button over an Image component in AI2.  The components cannot overlap.

You can do several things to 'simulate' that effect.   Each solution involves using a Canvas with a background image. See 

• Chapter 17. Creating Animated Apps
• 
  

It shows how the screen is set up on the Canvas.

1) Check for a color on the canvas using the Canvas1.GetPixelColor block ..when someone touches the Canvas and is touching over that 

color, you  execute your code much as you would using the Button.Click event handler.

2) Create a ringed-fence of values creating a 'hot spot' on the background image.  You do this by providing pixel coordinates over part of the image.  When a touch is within a box of pixel coordinates, you execute code.  Read the Programming Complex Conditions in Dr. Wolber et.al's book  Chapter 18  http://www.appinventor.org/bookChapters/chapter18.pdf  to see how a ringed-fence works.  The example is using geocoordinates but the concept also applies to Canvas screen pixel coordinates.

Here is an example of how you can use a colored map as a set of buttons.  How to set buttons on different parts of an image?

Regards,

Steve

[Deuce]

Hi!

So basically I would like have an image of the human body on which if you press on the heart, a new screen opens up about the heart. If you touch the stomach, an new screen opens up about the stomach, etc.

Therefor I need 'hidden buttons' the user can't see but me the creator would use these buttons to open the right screen :)

[Hossein Amerkashi]

@Deuce,

So basically you need to use canvas with background image as human body and then use imageSprites for heart, stomach, etc

-Hossein.

http://AppyBuilder.com

   

[SteveJG]

or you can use one of the other solutions posted above.

Regards,

Steve

[Martyn_HK]

I use a background image with a button on top. The button has no colour no text and set to fill screen. The background image is visible through the button.
By using 2 buttons you can add text. Have a look at dropController as an example. This has a flashing "Tap screen to start" message.

Another option is to simply use a button that fills the screen, however, this takes longer to display than a background image.