1

Image of the app

I'm developing a mobile app with ionic, and in the index page I want to make the regions of an image clickable, like links. How can I do that? Is there a way to do that in Javascript? Or a tool to define the clickable regions?

Jimmy
  • 873
  • 3
  • 12
  • 29

4 Answers4

1

see: http://www.w3schools.com/tags/att_area_coords.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
nloomans
  • 220
  • 2
  • 11
  • Thanks. And if I have the img with a width="100%" attribute, Can I define areas too? – Jimmy Nov 15 '15 at 20:23
  • It doesn't, however [this question](http://stackoverflow.com/a/13322059/3624196) shows you how you can make it work. – nloomans Nov 16 '15 at 17:02
1

You are looking for an image map, which is what <map> is for. In your case you would add <area shape="circle" coords="x,y,r"... /> for your circles, where x,y are the x and y coordinates and r is the radius. There are even tools to define your own image map for example.

Note that to connect the <map> with your <img> by using usemap="#myImageMap" where myImageMap is the name on your map:

<img src="myImage.png" .. usemap="#myImageMap">
<map name="myImageMap">
    <area shape="circle" ... />
    ...
</map>
Spencer Wieczorek
  • 21,229
  • 7
  • 44
  • 54
1

HTML tag map is designed exactly for this. Use href="javascript:onClick()" for JS calls instead of navigation.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

MDN has a good specification of the area tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

ap3rus
  • 91
  • 3
1

You can use <map> and <area>. But It can be not working on some devices and browsers. Then you can solve that problem through jQuery image map alternative

Community
  • 1
  • 1
WebEngine
  • 157
  • 2
  • 10
  • Image maps `` are standard, and have [wide support](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map#Browser_compatibility) among browsers. – Spencer Wieczorek Nov 15 '15 at 20:18