Привязка интернет ссылок к конкретному фрагменту изображения

Question

[vladimirp]

Добрый день, уважаемые пользователи. Подскажите пожалуйста, как можно решить данный вопрос* — имеется сайт / единственное содержимое — это просто png изображение, в котором выделены отдельные «зоны». Необходимо к каждому фрагменту прикрепить ссылку. Прошу не советовать мне «порезать» само изображение — как в принципе и нужно делать по web дизайну. Просто такими знаниями не обладаю — выступаю в роли дизайнера. Есть ли какие-нибудь программы для решения данной задачи или хотя бы подскажите ещё возможные решения*

Answer 1

[Алексей Фирсов]

юзай html teg map htmlbook.ru/html/map

или position: absolute, я бы делал именно так.

Answer 2

[ssbxlan]

ЕМНИП, в dreamweaver`e неплохо наглядно можно реализовать подобное, делает оно с помощью <map>, который уже посоветовали

Answer 3

[Антон Ломакин]

Вот как то так)

<div style="position:relative">
   <img src="какая то картинка">
   <a href="http://..." style="display:block; position:absolute; top:10px; left:20px; width:30px; height:10px;"></a>
</div>

Answer 4

[Виталий Перетятько]

Если вы дизайнер, то должно быть знакомы с такой программой, как Photoshop. В нем есть инструмент — Slice Tool.
viperet.info/skitch/slice-20120420-112002.png
После этого делаете Save for web и вам фотошоп сгенерирует картинки отдельные для каждого вашего слайса и всю нужную HTML разметку, она конечно будет на таблицах, но для не верстальщика — это саймый простой способ.
PS лучше слайсам давать имена латинскими буквами, оно потом так файлы-картинки называет.