Верстка категорий товара из изображения

[vadimon]

Имеется такое вот изображение категорий товаров. Беда вся в том, что слой всего один. Уже принял решение верстать его как карты-изображния, но чутье мне подсказывает, что это не единственный выход. Как можно еще реализовать?

[panig]

Можно еще абсолютным позиционированием. У тех блоков, что сзади, вырезать ту часть которая не относится к ним ну или оставить, но если кривовато будет, каша получится еле заметная.

[rus]

как вариант можно попробовать сделать в виде облака тегов.

[vadimon]

как вариант можно попробовать сделать в виде облака тегов.

нет, облако тегов не нужно, без скрипта, тем более артинки не цельные

[rus]

нет, облако тегов не нужно, без скрипта, тем более артинки не цельные

ну тогда map area или переделать интерактивную карту под ваши нужды.

[vadimon]

ну тогда map area или переделать интерактивную карту под ваши нужды.

скорее всего придется делать через map area, правда вес изображения при этом будет 170кБ (и так уже сжал насколько возможно), интерактивная карта не нужна, все намного проще, хотя и за нее спасибо, возможно пригодится мне в будущем.

[vadimon]

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

<div id="tovar">
		<a href=""><img src="images/kuh.jpg" title="Кухни" style="position:absolute; left:415px; top:240px;" /></a>
		<a href=""><img src="images/detsk.jpg" title="Детские" style="position:absolute; left:640px; top:270px;" /></a>
		<a href=""><img src="images/spaln.jpg" title="Спальни" style="position:absolute; left:330px; top:400px;" /></a>
		<a href=""><img src="images/stolov.jpg" title="Столовые" style="position:absolute; left:730px; top:380px;" /></a>
		<a href=""><img src="images/kuhni.jpg" title="Гарнитуры" style="position:absolute; left:550px; top:360px;" /></a>
		<a href=""><img src="images/stenki.jpg" title="Стенки" style="position:absolute; left:500px; top:525px;" /></a>
		<a href=""><img src="images/button.png" title="Кухни" style="position:absolute; left:385px; top:235px;" /></a>
		<a href=""><img src="images/stolov_button.png" title="Столовые" style="position:absolute; left:867px; top:370px;" /></a>
		<a href=""><img src="images/stenki_button.png" title="Стенки" style="position:absolute; left:720px; top:520px;" /></a>
		<a href=""><img src="images/spalni_button.png" title="Спальни" style="position:absolute; left:315px; top:387px;" /></a>
		<a href=""><img src="images/garnitur_button.png" title="Гарнитуры" style="position:absolute; left:535px; top:356px;" /></a>
		<a href=""><img src="images/kids_button.png" title="Детские" style="position:absolute; left:630px; top:254px;" /></a>
	</div>

[SelenIT]

Контейнеру фиксированные размеры и position:relative — и никого разбрасывать не будет.

[vadimon]

Контейнеру фиксированные размеры и position:relative — и никого разбрасывать не будет.

Спасибо, действительно помогло