Создание меню в одной картинке

[RazieL13]

Столкнулся с такой проблемой...

Охота сделать меню в картинке, при наведении на которую изменялся рисунок(hover, новая картинка поверх бэкграунда), а также чтоб каждая картинка работала как ссылка...

Вот пример:

Бэкгрануд имадж

Рисунки при наведении(hover) и т.д.

Рисунки (hover) специально сделал такого же размера как и бэкгрануд, чтобы координаты задавать одни и те же...

Но тем не менее столкнулся с трудностями, не знаю как это применить...

П.С.: Все картинки с прозрачным фоном...

Желательно без использования JS...

Заранее очень благодарен...

Edited August 16, 2009 by RazieL13

[psywalker]

позиционирование тебе в помощь

[RazieL13]

Спасибо... Я про позиционирование знаю немногое, но не знаю подход к этой проблеме... с чего начать... это все в один блок и просто туда ссылок накидать(с CSS'ами к ним)...?

И ещё, как сделать чтобы территория ссылки действовала именно в определенном участке бэкграундовской картинки...

Edited August 16, 2009 by RazieL13

[psywalker]

http://forum.htmlbook.ru/index.php?s=&...st&p=109583

[RazieL13]

Читал эту тему... попробую списками...

Я так понял бэкграунд оставляем в блоке, а внутри блока создаем список и каждому списку назначаем картинки(hover) ну и координаты соотвественно...

А начало действия ссылки также можно будет указать?

Мне надо чтобы сами ссылки не были видны, просто при наведении на одного из персонажей в бэкгрануд рисунке активировалась hover картинка и ссылка на страницу ...

Edited August 16, 2009 by RazieL13

[psywalker]

Читал эту тему... попробую списками...

Я так понял бэкграунд оставляем в блоке, а внутри блока создаем список и каждому списку назначаем картинки(hover) ну и координаты соотвественно...

А начало действия ссылки также можно будет указать?

Мне надо чтобы сами ссылки не были видны, просто при наведении на одного из персонажей в бэкгрануд рисунке активировалась hover картинка и ссылка на страницу ...

Конечноже, ссылками будут фотки и выглядеть они будут так, как тебе хочется

[RazieL13]

Спасибо... принимаюсь за работу... но если не получится я ещё отпишусь... и возможно предоставлю свой неработающий код... для наглядного примера

[psywalker]

Спасибо... принимаюсь за работу... но если не получится я ещё отпишусь... и возможно предоставлю свой неработающий код... для наглядного примера biggrin.gif

конечноже обращайся дружище

[RazieL13]

Спасибо огромное... все получилось))) Правда пришлось повозиться

Пример тут...

правда есть 1 нюанс... в Опере и ФФ все ок, а вот IE, немного не то показывает...

Идет смещение по горизонтали...

Возможно из-за того что это список, и IE смещает все LI относительно UL...

Скрины: ФФ и IE

Не подскажете, возможно ли от этого избавиться? )

Часть кода:HTML

<div id="navigg"><table><tr><td rowspan="2">
<div style="background:transparent url(http://guiltygear.ucoz.ru/header/ggheader.png) no-repeat scroll 0 0;">
<ul class="navigg" style="width:491px; height:409px; position:relative;">
<li class="aba"><div><a href="http://guiltygear.ucoz.ru/publ/3-1-0-4" target="_blank"><img src="http://guiltygear.ucoz.ru/header/aba.gif" border="0"></a></div></li>
...........
<li class="zappa"><div><a href="http://guiltygear.ucoz.ru/publ/3-1-0-25" target="_blank"><img src="http://guiltygear.ucoz.ru/header/zappa.gif" border="0"></a></div></li>
</ul>
</div>
</td><td align="right">
....................
</td></tr>
<tr><td>
......................
</td></tr></table>
</div><br>

Часть кода:CSS

#navigg li { list-style-type: none; position:absolute}

.aba {top:367; left:208;}
.anji {top:145; left:335;}
.axl {top:86; left:308;}
.baiken {top:208; left:335;}
.bridget {top:3; left:140;}

Edited August 16, 2009 by RazieL13

[psywalker]

слушай, тут сходу так и не скажу, потому что ситуация не из лёгких, много картинок и не стандартных, попробуй поставить *{zoom:1;} в начало стилей

[RazieL13]

В таблицу стилей...

Добавил, ничего...

Насчет картинок... их много но они все одинаково смещены... IE, как я понял берет начальную координат не с начала страницы, а с отступом...

Окей мне не горит ... я IE не пользуюсь и своим пользователям тоже советую не пользоваться...)

Серавно спасибо... наконец то научился манипулировать списками...)))

Edited August 16, 2009 by RazieL13

[RazieL13]

Еще вопрос... ) А можно сделать чтоб при наведении курсор менялся...? я забыл какой там тег... но только чтобы работал в этом списке, что я создал... скорее всего надо будет класс или ID задать тот же...