Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

clickable area of image

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?

like image 584
Outflorks Usus Avatar asked May 21 '13 13:05

Outflorks Usus


People also ask

What do you call an image with clickable areas?

An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

How do I make a certain part of an image clickable in HTML?

you can use the <area> tag.

How do you create an area in an image map?

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.

How to create clickable areas in an image?

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:

How to create a polygonal clickable area in HTML?

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.

How to get the area of clicked image in Android?

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.

What is the clickable area library?

This library lets you define clickable areas in an image, associate objects to it and listen for touch events on that area.


1 Answers

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: Foreground image

Background image: Background image

Clickable area: Representing 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"/> 

MappedImage with co-ordinates

Reference: Please have a look at Android Image Mapping.

I hope it will be helpful !!

like image 91
Mehul Joisar Avatar answered Sep 19 '22 06:09

Mehul Joisar