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

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

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

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

Имеется собственный сайт, 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">

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

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

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

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

Изображение которое используется для фона

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

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

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

Sham, спасибо за советы. случайно набрел на один зарубежный сайт, по исходному коду в 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;

}

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

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