Hotspot / Hover Zone на веб-странице

Question

Я не могу вспомнить, как называется этот процесс, но мне нужны средства для создания зоны быстрого доступа на веб-странице, чтобы, когда пользователь наводит указатель мыши на эту зону, курсор меняется на указатель, что позволит пользователю перейти на определенный сайт.

Просьба заметить, что я не имею в виду простой тег привязки вокруг изображения, я специально использую средства определения координат на веб-странице, которые затем превратят эту область в зону наведения.

Надеюсь, это имеет смысл.

Надеюсь, кто-нибудь может дать мне знать, как это сделать, поскольку я совершенно уверен, что что-то подобное существует.

Спасибо.

Answer 1

Очень простое решение - поместить тег привязки в определенную точку на странице.

<a id="hotspot" href="#!link">hidden hotspot</a>

#hotspot {
  position: absolute;
  width: 100px;
  height: 100px;
  background: transparent;
  display: block;
  top: Xpx;
  left: Xpx;
  text-indent: -10000px;
}

Answer 2

Другие предложили позиционировать теги привязки, но так как вы упоминаете координаты, это звучит так, будто вы ищете старомодную карту изображений. Это древнее, но если вам нужны какие-то произвольные формы, возможно, это вариант. Помните это?

<img src="yourpic.png" width="500" height="400" usemap="#themap">
<map name="themap">
    <area shape="polygon" coords="0,0,100,0,100,100,0,100" href="..." id="foo" />
    <area shape="circle" coords="150,30" href="..." id="bar" />
</map>

Я не знаю специфики вашего требования, но, возможно, вы могли бы бросить что-нибудь вместе с большим пустым изображением, определить группу многоугольников и / или окружностей, добавить некоторые варианты поведения при наведении на каждый area и перейти есть.

Answer 3

Хотя я бы порекомендовал абсолютно позиционированные ссылки, как указано выше, похоже, вы ищете карту изображений .

Answer 4

Походит на простой якорь, который абсолютно позиционирован