문제 설명
모바일용 HTML 5의 특정 영역에 링크가 있는 이미지 (Image with links in certain areas in HTML 5 for mobile)
저는 ionic으로 모바일 앱을 개발 중이며 인덱스 페이지에서 링크와 같이 이미지 영역을 클릭 가능하게 만들고 싶습니다. . 어떻게 할 수 있습니까? Javascript에서 그렇게하는 방법이 있습니까? 아니면 클릭 가능한 영역을 정의하는 도구입니까?
참조 솔루션
방법 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>
방법 2:
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>
방법 3:
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
방법 4:
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
(by Jimmy、nloomans、Spencer Wieczorek、ap3rus、WebEngine)