CSS смена картинки

[sashok60]

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

[Google]

Псевдокласс hover в помощь, подробнее здесь

[nocsambew]

Прочитай про CSS свойство :hover, которое отвечает за изменение объекта в момент, когда на него наводят курсор.

В общем случае работает так: задаешь кнопке display:block;, ширину и высоту указываешь, задаёшь фоновое изображение, а потом отдельно для этой кнопки пишешь правило с :hover, в котором меняешь фон кнопки на ту картинку, которая должна быть показана при наведении мыши.

Вот тут расписаны все основные ресурсы по вёрстке, на которых стоит читать полезную инфу: http://webdev.lovata.com/2007/09/28/...e-nachinali-2/

Добавлено через 4 минуты
Вообще тем, кому действительно нужно научиться верстать, советую начать с книжки о CSS и XHTML издательства O'Reily - такие, знаете, со зверями на обложках. Они есть в русском переводе даже в глухой провинции. Ну и параллельно активно читать то, что пишут в интернете. Сайтов хороших сейчас навалом, а всякие ходовые ништяки и приёмы разжёваны не по одному разу уже.

[Grog221]

У меня примерно та же проблема.
Мне нужно заменить у себя в блоге на вордпрессе в постах все текстовые ссылки "скачать" на кнопки рисованные *.png, чтобы при нажатии (active) отображался другой рисунок - эта же кнопка с подсветкой.
Делаю так:

.botton
{
display:block;
width:152px;
height:51px;
background:url(Download1.png) no-repeat;
outline:none;
}
.botton:active
{
background:url(Download2.png) no-repeat;
}

Получается кнопка и сдвигается на лево (а ссылка стоит по центру). Как вернуть ее в центр?
Помогите пожалуйста!

[p306ec]

.className { background:url(image.gif) }
.className:hover { background:url(image_hover.gif) }

Grog221, прописывайте для :active точные параметры изображения.

[pashakuz]

Цитата: Сообщение от p306ec .className { background:url(image.gif) } .className:hover { background:url(image_hover.gif) } Grog221, прописывайте для :active точные параметры изображения.

вообще лучше всего сделать даже не так.
склеиваешь image.gif и image_hover.gif в один файл. Например у тебя кнопка 100х20, значит делаешь новую картинку 100х40 в которую одну под другой ставишь две свои картинки, после чего:

a {
display: block;
width: 100px;
height: 20px;
background-image: url(image.gif);
background-repeat: no-repaet;
background-position: top left;
overflow: hidden;
}

a:hover {
backgtound-position: bottom left;
}

Тоесть меняться только позиция картинки. Это хорошо, потому что если ставить на ховер отдельную картинку, то ее загрузка происходит только в момент наведения на кнопку, что может вызвать некоторую задержку (если канал узкий). В случае как описал я - загружается всего одна фотка сразу)

[Defite]

Цитата: Сообщение от nocsambew Вообще тем, кому действительно нужно научиться верстать, советую начать с книжки о CSS и XHTML издательства O'Reily - такие, знаете, со зверями на обложках. Они есть в русском переводе даже в глухой провинции. Ну и параллельно активно читать то, что пишут в интернете. Сайтов хороших сейчас навалом, а всякие ходовые ништяки и приёмы разжёваны не по одному разу уже.

как профессиональный верстальщик, могу посоветовать поковырять еще сайт csszengarden.com. Здесь и новички и профессионалы выкладывают свои дизайны, дабы показать гибкость связки css&xhtml. Все в открытом доступе, т.е. можно потренироваться на их дизайнах, разумеется, без последующего копипаста себе на страничку.
Есть еще онлайн журнал alistapart.com - к сожалению, на английском, но даются довольно полезные советы не только по верстке, но и по созданию сайта в целом. рекомендую к прочтению)

[nanomyte]

Самая нормальная статья на тему CSS-кнопок с минимумом JavaScript здесь: dinamic_link_buttons_with_css/

[lstaticl]

Цитата: Сообщение от pashakuz вообще лучше всего сделать даже не так. склеиваешь image.gif и image_hover.gif в один файл. Например у тебя кнопка 100х20, значит делаешь новую картинку 100х40 в которую одну под другой ставишь две свои картинки, после чего: a { display: block; width: 100px; height: 20px; background-image: url(image.gif); background-repeat: no-repaet; background-position: top left; overflow: hidden; } a:hover { backgtound-position: bottom left; } Тоесть меняться только позиция картинки. Это хорошо, потому что если ставить на ховер отдельную картинку, то ее загрузка происходит только в момент наведения на кнопку, что может вызвать некоторую задержку (если канал узкий). В случае как описал я - загружается всего одна фотка сразу)

Хорошее решение. +1

[superjeak]

согласен! но я пользуюсь css кодами заливая их на сайт через менеджер

[redrush]

еще можешь почитать о вышеописанном методе Pixy на http://wellstyled.com/css-nopreload-rollovers.html