Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Динамическая карта для ссылки


Автор: vintyara 30.6.2012, 12:56
Ребят, не могу никак придумать, как сверстать макет. Есть главная страница, на ней будет изображение. Изображение представляет собой такую форму -

http://s1.ipicture.ru/Gallery/Viewfull/11518610.html

Смысл в том, что левая часть "инь яня" должна вести по одному адресу, правая - соответственно, по другому.

Все это можно сделать прекрасно используя MAP и AREA, но... эта картинка не должна быть фиксированной. Она должна растягиваться по высоте монитора. Тут мап уже не поможет, координаты смещаются. Реально ли такое вообще сделать? Или делать только фиксированную высоту - ширину и накладывать карту?

Автор: ksnk 30.6.2012, 13:47
vintyara, Один вариант - сделать большой элемент input type='image'. Тогда при клике по нему на сервер прилетят еще и координаты клика, по которым при помощи уличной магии можно вычислить куда надо пере направить запрос.

Второй вариант - нарисовать эту картинку канвасом. Канвасом-же при клике определять цвет точки изображения и переходить... 

Если хочется еще и всплывающую подсказку над ссылкой иметь - придется мастерить динамически меняющийся под размер map.

Автор: Wolf1994 30.6.2012, 13:53
+1:

Если картинку привязать к заднему фону элемента table, то можно, например с помощью JavaScript'а, создать подробную сетку из tr/td и назначить на каждую ячейку ссылку или onclick, отражающие цвет фрагмента.

Автор: tarsukoff 30.6.2012, 22:06
А почему бы не разрезать её на два png и свести используя z-index ? 

Автор: vintyara 30.6.2012, 23:38
Цитата(tarsukoff @ 30.6.2012,  22:06)
А почему бы не разрезать её на два png и свести используя z-index ?

дык все равно одна из низ будет же перекрывать другую частично!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)