Studio AD : Верхнее меню

Дата: Воскресенье, 10.01.2010, 18:36 | Сообщение # 1

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60

Делаю верхнее меню(горизонтальное) на сайте, просто картинки я могу поставить, но мне ещё нужно сделать БэкГраунд к ним и чтобы при наведении картинка менялась, кто знает(я думаю все знают) напишите плиз. С меня +++

WeLord

Дата: Воскресенье, 10.01.2010, 18:50 | Сообщение # 2

шептун

Группа: Проверенные

Пользователь №: 457

Сообщений: 91

Получено оценок: 8

Карма: 8

axe, дай код меню.

подправлю как знаю

Дата: Воскресенье, 10.01.2010, 18:58 | Сообщение # 3

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60

щас выложу

BeSinLi

Дата: Воскресенье, 10.01.2010, 18:59 | Сообщение # 4

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Карма: 57

Замечания: 60%

Code

#id { background: url('...') ; }

#id:hover { background-position: ?px ?px ; }

Создаешь файл со спрайтами, вставляешь на него ссылку вместо "...". В background-position указываешь нужные значения положения для картинки при наведении.

Если что не понятно спрашивай...

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Воскресенье, 10.01.2010, 19:03 | Сообщение # 5

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60

BeSinLi,

Quote (BeSinLi)

#id { background: url('...') ; }34#id:hover { background-position: ?px ?px ; }

я так понял к каждой картинке-ссылке нужно свой id вставлять?

Quote (BeSinLi)

#id:hover { background-position: ?px ?px ; }

ммм у меня на 2-х картинках одинаковый размер, просто там цвет текста меняется, и все, ну короче одна картинка и при наведении появляетса другая того же размера(щас скину пример)

Дата: Воскресенье, 10.01.2010, 19:07 | Сообщение # 6

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60

вот: это не мое меню так шо не думайте што я его ставить буду, просто для примера набрасал:

вот как должно быть:

вот бэкграунд:

вот ссылка(картинка):

вот какая должна стать ссылка при наведении мышки:

Сообщение отредактировал axe - Воскресенье, 10.01.2010, 19:10

Дата: Воскресенье, 10.01.2010, 19:11 | Сообщение # 7

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60

можно канешно сделать ссылки-картинки вместе с бэкграундом

BeSinLi

Дата: Воскресенье, 10.01.2010, 19:27 | Сообщение # 8

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Карма: 57

Замечания: 60%

axe, Ну вот примиер:

Code

#knopka { height: 150px; width: 200px; background: url('/bg.png') ; background-position: 0px 0px ; }

#knopka:hover { background-position: 0px -150px ; }

Наш bg.png :

Прикрепления: 2204461.png (4.0 Kb)

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Воскресенье, 10.01.2010, 19:38 | Сообщение # 9

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60

BeSinLi, короче надо просто вставить картинки с куском БГ и несколько раз прописать

Code

knopka
knopka:hover

я так понял? а в HTML шо вставить?

BeSinLi

Дата: Воскресенье, 10.01.2010, 19:52 | Сообщение # 10

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Карма: 57

Замечания: 60%

Quote (axe)

я так понял? а в HTML шо вставить?

zOMFG! Не в духе я сейчас расписывать, но ладно...

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css спрайты</title>
<style type="text/css">
#knopka { height: 150px; width: 200px; background: url('.../bg.png') ; background-position: 0px 0px ; }

#knopka:hover { background-position: 0px -150px ; }
</style>
</head>

<body>
<div id="knopka"></div>
</body>
</html>

Создаем файл "bg.png" в Ps в который вставляем 2 наших изображения, это наша обычная "кнопка" и кнопка при наведенном на нее курсоре "к:hover".

background-position: 0px 0px ; отвечает за верхний левый угол нашего фона в файле bg.png. Например если background-position: -20px -30px ; то отступ от верхнего края нашего bg.png будет 30px в низ а от левого -20px в право.

При наведении на наш div элементарно меняется положение background'a в файле bg.png.

P.s.: плохо как то объяснил, спишем это на настроение.

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Сообщение отредактировал BeSinLi - Воскресенье, 10.01.2010, 19:54

Дата: Воскресенье, 10.01.2010, 20:01 | Сообщение # 11

шептун

Группа: Проверенные

Пользователь №: 669

Сообщений: 60