Изображение со встроенными ссылками?

Question

Мне нужно встроить ссылки в изображение на веб-странице google, которая отправит вас на другие веб-страницы. Более конкретно, это интерактивный образ ячейки, который должен позволить вам нажимать на отдельные органеллы (субклеточные области) и получать информацию о каждом из них по ссылке на другой сайт. Я полагал, что его нужно будет закодировать и что координаты каждого из этих мест на изображении потребуются также ... но я программируюсь, и если существует более простой способ или веб-страница, которая делает это для вас, это было бы фантастически. Большое спасибо за помощь! Любая информация очень ценится.

Answer 1

Вам нужен знак <map>!

Этот пример из W3School показывает, как это работает:

Тег используется для определения на стороне клиента изображение-карту. Карта изображения - изображение с интерактивными областями.

Обязательный атрибут имени <map> элемента связан с атрибутом usemap <img> «s и создает связь между изображением и картой.

элемент содержит ряд элементов <area>, что определяет в активной области в карте изображения.

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

Есть онлайн инструменты like this one, которые позволяют построить этот HTML-код прямо из вашего браузера.