Верх и низ имаги в CSS - HTML и CSS

Alex Cones · 22.10.2010, 14:47

Никак не врублюсь, как через CSS соорудить кнопку-имагу, которая при hover будет показывать свой низ, а в normal - верх.

MrJenika · 22.10.2010, 23:28

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

Alex Cones · 22.10.2010, 23:37

Сейчас так и есть на моем http://squary.ru . Минус в том, что ему нужно время, чтобы подгрузить имагу при наведении - я на (почти) диал-апе это особо чувствую.

Magneto · 23.10.2010, 02:35

Эта технология называется CSS спрайты: несколько изображений объединяются в одно и позиционируются в элементе при помощи отрицательных отступов в background.

Код:

<!doctype html>
<html><head>
	<title>CSS sprite</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
a{
	width:100px;
	height:50px;
	display:block;
	background:url('sprite.jpg') 0 0 no-repeat}
a:hover{
	background:url('sprite.jpg') 0 -50px no-repeat}
</style>
</head><body>
	<a href="#"></a>
</body></html>

Посмотреть как выглядит.

DomiNick · 23.10.2010, 03:12

Эх, не успел... Пока искал уже ответили...

У меня такой вариант в коллекции завалялся (на всякий случай пусть будет):

Код 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>

Alex Cones · 23.10.2010, 10:37

Благодарю за столь полезные ответы.

Alex Cones · 23.10.2010, 13:35

Такой вопрос - заюзал метод выше:

Код 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>

Предположим, что пользователь отключил показ картинок. Как решить?

Magneto · 23.10.2010, 18:00

Нужно использовать текстово-графическое меню все надписи нужно выполнить силами html и css (обычным текстом) а красивости можно выполнить графически.

И если пользователь отключит картинки останутся надписи кликая по которым он сможет перемещаться по Вашему сайту.

22.10.2010, 23:28	#2
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	сделайте два изображения, первое поставьте бэкграундом обычной ссылке, а второе бэкграундом при ховер. webinmd.com

22.10.2010, 23:37	#3
Alex Cones Trust no one. Старожил Регистрация: 07.04.2009 Сообщений: 6,526	Сейчас так и есть на моем http://squary.ru . Минус в том, что ему нужно время, чтобы подгрузить имагу при наведении - я на (почти) диал-апе это особо чувствую. SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА. МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ

23.10.2010, 02:35	#4
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	Эта технология называется CSS спрайты: несколько изображений объединяются в одно и позиционируются в элементе при помощи отрицательных отступов в background. Код: `<!doctype html> <html><head> <title>CSS sprite</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> a{ width:100px; height:50px; display:block; background:url('sprite.jpg') 0 0 no-repeat} a:hover{ background:url('sprite.jpg') 0 -50px no-repeat} </style> </head><body> <a href="#"></a> </body></html>` Посмотреть как выглядит.

23.10.2010, 10:37	#6
Alex Cones Trust no one. Старожил Регистрация: 07.04.2009 Сообщений: 6,526	Благодарю за столь полезные ответы. SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА. МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ

23.10.2010, 13:35	#7
Alex Cones 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
Magneto Форумчанин Регистрация: 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