У меня есть задача, и я не могу найти решение или направление для цели.

задача

Для этой задачи нужны ссылки, размещенные на полном фоне изображения. В этом изображении есть несколько продуктов, и ссылки должны быть поверх этих продуктов, принимая во внимание, что экран может быть шире или нет, поэтому фон изображения может растягиваться, и поэтому положение ссылок также должно быть изменено. есть идеи как это сделать?

Проверять

Я уже пробовал<map> а также<area> теги, но совместимость с планшетами может быть сложно. Также большой проблемой является то, что я могу указать его положение, но я не могу разместить изображение или CSS на этих элементах. Может быть, решение с jquery? Есть идеи?

HTML

<div class="hotspots-image">
    <img class="image" src="IMAGE" class="imagemap"/>

    <a class="hotspot" href="#">
        <span class="hotspot-icon">O</span>
    </a>
    <a class="hotspot" href="#">
        <span class="hotspot-icon">O</span>
    </a>
</div>

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

Заранее спасибо!!!!

Скрипки:

http://jsfiddle.net/uDCuB/