Search code examples
javascriptimageionic-frameworkregions

Image with links in certain areas in HTML 5 for mobile


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?


Solution

  • 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>