Menu
i'am designing a GUI remote control, but instead of making separate buttons for each remote button, i want to get a full ready remote image and set certain parts of it click-able. is there a way rather than the motion event to do this?
584
An image map is an image with clickable areas. The areas are defined with one or more <area> tags.
you can use the <area> tag.
The <area> tag defines an area inside an image map (an image map is an image with clickable areas). <area> elements are always nested inside a <map> tag. Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
To create clickable areas in an image, create an image map, with clickable areas. For example, on clicking a box, the different website opens and on clicking a triangle in the same image, a different website opens. The <area> tag defines an area inside an image-and nested inside a <map> tag. The following are the attributes:
poly - for the polygonal clickable area. default - to make the entire image clickable. The image will be added using the < img > tag. Add the path to the src attribute. The usemap attribute is used to link the map element. The name and usemap attribute should have the same value.
you can map your image with co-ordinates and accordingly you can get the information of area which has been clicked. if you are not aware of co-ordinates,you can create your mappedimage from here Reference: Please have a look at Android Image Mapping.
This library lets you define clickable areas in an image, associate objects to it and listen for touch events on that area.
I have 2 solutions for your requirement.in both,the whole image stays clickable but you can get information about clicked area.
Solution 1:
you can mask the image and get the pixel color of that underneath image.so ultimately you can come to know which area has been clicked.
here,whenever clicked occurs,you can check the pixel color of background image and match it with predefined color set to know about which area has been clicked.
Foreground image: 
Background image: 
Clickable area: 
Still confused?
Reference: I would like to suggest you to go through this tutorial.
Solution 2:
you can map your image with co-ordinates and accordingly you can get the information of area which has been clicked.
Example: MappedImage with co-ordinates
if you are not aware of co-ordinates,you can create your mappedimage from here
co-ordinates for Kansas will look something like this,
<area shape="poly" coords="243,162,318,162,325,172,325,196,244,196" id="@+id/area14" name = "Kansas"/> 
Reference: Please have a look at Android Image Mapping.
I hope it will be helpful !!
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
