Проблема при создании графической карты ссылок

[IAEA]

Добрый день уважаемые веб-мастера. Нуждаюсь в Вашем совете.

Имеется собственный сайт, CMS - ucoz. Прикреплен собственный домен.

Решил создать графическую карту ссылок, чтобы пользователи могли кликая по определенной области изображения, которое является фоном сайта - попасть на главную страницу.

Проблема заключается в том, что дизайн сайта прописан в css и соответственно все параметры картинки, которая используется для фона и для которой необходимо создать карту ссылок, прописаны в этом css файле.

В коде CSS я нашел блок, который отвечает за параметры картинки, которая используется в качестве фона на сайте:


#background-top {

min-height: 1235px;
min-width: 927px;
width: 100%;
background: url('images/background-top.jpg') no-repeat center top;


Возникает вопрос: как в данные параметры поместить теги для карты ссылок и можно ли такое сделать вообще. Код для карты ссылок я уже составил, он выглядит следующим образом:


<MAP NAME="LOGO">
<AREA SHAPE="RECT" COORDS="217,38,506,93" HREF="http://www.name-site.ru/">
</MAP>
<IMG SRC="/images/background-top.jpg" USEMAP="#LOGO">


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

[Sham]

Определите width и height для img. Непонятно, зачем стили тогда...

[IAEA]

хорошо попробую объяснить по другому.

вот адрес сайта (http://www.os-style.ru/) (не реклама, а в качестве живого примера страницы).
А вот изображение которое является фоном и для которого нужно сделать карту ссылок. Вот скрин

http://www.os-style.ru/images/background-top.jpg

А вот та область изображения на которую нужно сделать ссылку используя карту ссылок.

http://www.os-style.ru/Other/background-top.jpg

[Sham]

map возможен только для тега img (даже не для самой картинки). Т.е. определите ширину и высоту тега (width и height), в которую должны уместиться координаты area. Для фоновой картинки этот вариант не годится.
Для фона имхо сгодится прозрачный элемент с position:absolute (например div) и координатами. Но тогда и фон дб абсолютно расположен...

[IAEA]

Sham, спасибо за советы. случайно набрел на один зарубежный сайт (http://iconmoon.com/blog2/Menueverywhere-app-icon/), по исходному коду в Google Chrome можно понять что ситуация аналогичная моей, только там все уже реализовано.

ссылка на навигационную панель и на логотип сайта, который перенаправляет посетителей на главную страницу сайта, реализованы через div блоки,

<div id="logo">
<a href="../index.html"><h1><strong>IconMoon</strong> - Online Portfolio of JJ.Ying</h1></a>
</div>


параметры которых прописаны в css.



#header{
width:950px;
height:115px;
display:block;
position:relative;
}
#logo{
position:absolute;
left:74px;
top:0;
display:block;
width:333px;
height:98px;
overflow:hidden;
}
#logo a{
display:block;
width:333px;
height:98px;
}
#logo a:hover{
background:url('images/main.png') no-repeat;
}


На днях, хочу более подробно разобраться с этим кодом и по аналогии реализовать точно такой же у себя на сайте. глядишь может и получится.

[rsod]

http://scr.rsod.org/scr_2011-02-20_19-00-01.png
жуть. Мой вам совет, валите с юкоза. p.s. windows xp уже постепенно умирает p.p.s. не забудьте создать на сайте статьи "Избавляемся от тормозов в Windows XP" и "Как вернуь Windows в рабочее состояние."