Eu tenho uma tarefa a realizar e não consigo encontrar uma solução ou direção para segmentar.

Tarefa

Esta tarefa precisa de alguns links posicionados em um plano de fundo completo da imagem. Essa imagem possui alguns produtos e os links precisam estar em cima desses produtos, levando em consideração que a tela pode ser mais larga ou não, para que o fundo da imagem possa se esticar e, portanto, a posição dos links também precisa ser adaptada. Alguma idéia de como fazer isso?

Tente

Já tentei o<map> e<area> tags, mas a compatibilidade com tablets pode ser complicada. Também uma grande questão é que posso especificar sua posição, mas não consigo colocar nenhuma imagem ou CSS nesses elementos. Talvez a solução seja com jquery? Alguma ideia?

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>

Portanto, o hotspot são os links que, suponho, seriam posicionados absolutos e em uma determinada posição. Talvez você tenha outras informações ou instruções a seguir?

Desde já, obrigado!!!!

Violino:

http://jsfiddle.net/uDCuB/