Добавление всплывающего списка к изображению для мобильного веб-приложения - PullRequest
Новая
       30

Добавление всплывающего списка к изображению для мобильного веб-приложения

0 голосов
/ 23 апреля 2019

Я использую jQuery Mobile для создания мобильного веб-приложения.У меня есть изображение (оно может быть преобразовано в любой формат, в настоящее время это TIFF).Изображение будет отображаться на телефоне / столе.Я хотел бы, чтобы на изображении были ссылки, которые я хотел бы, чтобы всплывающий список данных появлялся, когда пользователь нажимает на ссылку.Каждая ссылка будет иметь отдельные данные.У меня вопрос, что будет лучшим подходом к этому?Как добавить значки в определенное место на изображении?Я открыт для использования html5 или запросов мобильных решений.Спасибо.

Ответ

Я нашел лучший ответ на проблему.Он использует встроенный тег html5.Вот пример того, как его использовать:

https://html.com/images/how-to-make-an-image-map

Я также нашел веб-сайт для создания интерактивных координат для изображения:

Отображение изображений

И, наконец, я нашел плагин, который позволяет использовать карты в мобильном приложении путем пересчета координат области в соответствии с фактическим размером изображения при загрузке и window.resize:

jQuery RWD Image Maps

1 Ответ

2 голосов
/ 23 апреля 2019

Я нашел лучший ответ!Если у кого-то есть лучшее решение, не стесняйтесь опубликовать свое решение.

Ответ

Ответ заключается в использовании тега <map> в html 5. См. Пример здесь:

https://www.w3schools.com/tags/tag_map.asp

Вот полностью рабочий пример: 

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