|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
22.10.2010, 14:47 | #1 |
Trust no one.
Старожил
Регистрация: 07.04.2009
Сообщений: 6,526
|
Верх и низ имаги в CSS
Никак не врублюсь, как через CSS соорудить кнопку-имагу, которая при hover будет показывать свой низ, а в normal - верх.
SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА.
МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ |
22.10.2010, 23:28 | #2 |
Форумчанин
Регистрация: 07.09.2009
Сообщений: 361
|
сделайте два изображения, первое поставьте бэкграундом обычной ссылке, а второе бэкграундом при ховер.
|
22.10.2010, 23:37 | #3 |
Trust no one.
Старожил
Регистрация: 07.04.2009
Сообщений: 6,526
|
Сейчас так и есть на моем http://squary.ru . Минус в том, что ему нужно время, чтобы подгрузить имагу при наведении - я на (почти) диал-апе это особо чувствую.
SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА.
МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ |
23.10.2010, 02:35 | #4 |
Форумчанин
Регистрация: 10.02.2008
Сообщений: 178
|
Эта технология называется CSS спрайты: несколько изображений объединяются в одно и позиционируются в элементе при помощи отрицательных отступов в background.
Код:
|
23.10.2010, 03:12 | #5 |
Студент, не
Старожил
Регистрация: 29.01.2009
Сообщений: 2,067
|
Эх, не успел... Пока искал уже ответили...
У меня такой вариант в коллекции завалялся (на всякий случай пусть будет): Код HTML:
<html> <head> <title>Test №02131</title> <style> a.logo:hover { background-position: 0px -84px; /* координаты второго спрайта */ } a.logo { display: block; background-image: url("http://......."); background-position: 0px 0px; height: 41px; /* размеры спрайта */ width: 152px; /* размеры спрайта */ } </style> </head> <body> <a class="logo" href="http://......."></a> </body> </html>
I am the First of Cyber Evolution...
I am the First to Program your Future... |
23.10.2010, 10:37 | #6 |
Trust no one.
Старожил
Регистрация: 07.04.2009
Сообщений: 6,526
|
Благодарю за столь полезные ответы.
SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА.
МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ |
23.10.2010, 13:35 | #7 |
Trust no one.
Старожил
Регистрация: 07.04.2009
Сообщений: 6,526
|
Такой вопрос - заюзал метод выше:
Код HTML:
<a href = "/" class = "button1"></a> <a href = "/" class = "button2"></a> <a href = "/" class = "button3"></a> <a href = "/" class = "button4"></a> <a href = "/" class = "button5"></a> <a href = "/" class = "button6"></a>
SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА.
МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ |
23.10.2010, 18:00 | #8 |
Форумчанин
Регистрация: 10.02.2008
Сообщений: 178
|
Нужно использовать текстово-графическое меню все надписи нужно выполнить силами html и css (обычным текстом) а красивости можно выполнить графически.
И если пользователь отключит картинки останутся надписи кликая по которым он сможет перемещаться по Вашему сайту. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Прижать левый блок максимально в низ. | rext | HTML и CSS | 6 | 17.07.2010 13:50 |
Видео верх ногами | Николай11 | Софт | 2 | 07.01.2010 18:34 |
Как реализовать переход на верх страницы по образцу? | akokin | JavaScript, Ajax | 4 | 10.12.2009 16:07 |
Как поднять на верх динамически созданное ранее окно? | John_chek | Общие вопросы Delphi | 9 | 28.04.2009 17:45 |
TWebBrowser. Как автоматически прокрутить окно в самый низ | makarrrka | Компоненты Delphi | 0 | 09.02.2009 16:50 |