I am using jQuery Mobile for creating the mobile web application. I have an image (it can be converted to any format, currently it is TIFF). The image will be displayed on a phone/table. I would like to have links on the image that I would like to have a popup list of data appear when the user clicks on the link. Each link will have separate data. My question is what would be the best approach to this? How would I add the icons to a specific location on the image? I am open to using html5 or query mobile solutions. Thank you.
Answer
I found the best answer to the problem. It is using the built-in html5 tag . Here is an example of how to use it:
https://html.com/images/how-to-make-an-image-map
I also found a website to create the clickable coordinates for the image:
And finally I found a plugin that allows maps to be used in a mobile application by recalculating the area coordinates to match the actual image size on load and window.resize:
I found the best answer! If anyone has a better solution, feel free to post your solution.
Answer
The answer is to use the <map> tag in html 5. See example here:
https://www.w3schools.com/tags/tag_map.asp
Here is fully working example:
<script>
function clickmap(info)
{
alert(info);
}
</script>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="#" onclick="clickmap('someinfo 1')" alt="Sun">
<area shape="circle" coords="90,58,3" href="#" onclick="clickmap('someinfo 2')" alt="Mercury">
<area shape="circle" coords="124,58,8" href="#" onclick="clickmap('someinfo 3')" alt="Venus" >
</map>