размещение ссылок на фоновом изображении

Question

Я хочу разместить ссылки на фоновом изображении (заданном в CSS) и спросить, есть ли альтернатива тегу карты?HTML5 или элегантное решение JS?

Примечание: само изображение не является картой.Я просто хочу разместить 5 ссылок на конкретные позиции

спасибо

Answer 1

Если ваши ссылки прямоугольные, тогда простое решение - использовать position:absolute ссылки на position:relative фоне.

Если ваши ссылки не прямоугольные, вы можете поймать событие click () на элементе фона и затем выполнить соответствующее действие, если координаты соответствуют вашей «горячей» области.

См. http://jsfiddle.net/STjfz/2/ для примера кода обоих методов.

Answer 2

Я бы НИКОГДА не рекомендовал использовать тег карты. Вы теряете всю ценность SEO, делая это. Я рекомендую использовать аналогичный синтаксис:

<div id="backgroundElement">
 <a href="#" id="link1">Follow Me on Twitter</a>
 <a href="#" id="link2">Follow Me on Facebook</a>
 <a href="#" id="link2">Follow Me on Google+</a>
</div>

и в CSS использовать

#backgroundElement{ position:relative; background:url(image/bg.jpg) no-repeat; }
#link1{ position:absolute; top:150px; left:200px; background:url(image/icon/twitter.png) no-repeat; height:24px; width:24px; display:block; text-indent:-9999em; }

Ссылки сверху и слева будут определять его расположение на фоне. Убедитесь, что высота и ширина установлены, а блок отображения и отступ текста настроены для удаления текста и его правильного форматирования.