Изображения ссылки в некоторых областях в HTML 5 для мобильного

Question

Я занимаюсь разработкой мобильных приложений с ионным, и в индексной странице, я хочу, чтобы регионы с Clickable изображений, как ссылки. Как я могу это сделать? Есть ли способ сделать это в Javascript? Или инструмент для определения областей, которые можно кликать?

Answer 1

см: 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> 

Answer 2

Вы ищете карту изображения, что и <map> для. В вашем случае вы добавите <area shape="circle" coords="x,y,r"... /> для своих кругов, где x,y - это координаты x и y, а r - радиус. Существуют даже инструменты для определения вашей собственной карты изображений for example.

Обратите внимание, что для подключения <map> с вашим <img> с помощью usemap="#myImageMap" где myImageMap является name на вашем map:

<img src="myImage.png" .. usemap="#myImageMap"> 
<map name="myImageMap"> 
    <area shape="circle" ... /> 
    ... 
</map> 

Answer 3

HTML тег map предназначен именно для этого. Используйте href="javascript:onClick()" для вызовов JS вместо навигации.

<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 имеет хорошую спецификацию area тега - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Answer 4

Вы можете использовать <map> и <area>. Но он не может работать на некоторых устройствах и в браузерах. Тогда вы можете решить эту проблему через jQuery image map alternative