двухэтажная картинка

maxs · November 1, 2008

Часто встречаю картинки состоящие как бы из 2 объединенных, применяются они вместо варианта смены картинки при наведении мышкой, чтобы не было тормозов при подгрузке. Эта картинка загружается сразу.

Вот пример

Как её применить?

В классе прописано что-то вроде background:transparent url(/111.gif) no-repeat scroll center top; и размер в высоту в 2 раза меньше, но не работает.

Edited November 1, 2008 by maxs

Anami · November 1, 2008

Не, а серьёзно код сложно привести? Можно конечно погадать, но думаю посмотреть и увидеть проблему - эффективнее ,)

Кстати что за scroll ?

Edited November 1, 2008 by Anami

maxs · November 1, 2008

Вот код примера, скрол это из-за firebug видимо

.button {display:block;text-align:center;  color:#fff; font-weight:bold; text-decoration:none; font-size:14px;}

#wrap {width:100%; background: url(../img/wrap_bg.gif) no-repeat top center;  }
#sign_up { position:absolute; background:url(../img/sign_up.jpg) no-repeat top; width:264px; height:50px; top:305px; left:50%; margin-left:185px; padding-top:10px;}

картинка sign_up.jpg

upd.я идиот, дальше не прокрутил, вот продолжение, кому интересно

#sign_up:hover { background-position: 0px -60px;}

#container { width:1006px; margin:0px auto; position:relative; background:url(../img/container_bg.gif) repeat-y top center;}

Edited November 1, 2008 by maxs

Anami · November 1, 2008

Код страницы и код цсс.

Иван Шумов · November 1, 2008

все просто - допустим у нас есть кнопка 200x20, тогда картинка у нас допустим 200x40 (расположены по-вертикали)

<a href="" class="menu">навигацияяяяяяя</a>
<style type="text/css">
.menu {  display:block; width: 200px; height: 20px; background: url('bg.gif') no-repeat left 0;}
.menu:hover {  background: url('bg.gif') no-repeat left -20px;}
</style>

в теории все.

Anami · November 1, 2008

В теории для это юзается owerflow: hidden

Иван Шумов · November 2, 2008

не обязательно. Это только если текст "может-быть" вылезет за пределы меню) а так нафиг

Anami · November 2, 2008

Ну как минимум выше вероятность кросбраузерности, ато ie6 с отступами не в ладах.

Иван Шумов · November 2, 2008

врешь к тому же я тут у нас что - правильно - работает background - а ему на отступы по-бараьбану

Anami · November 2, 2008

Хотя да, бэкграунду пофиг. Но всеравно хидден логичнее

=Р

Anami · November 2, 2008

Блин. Точно. Hidden это для меню с подменюшками и бекграундом нужен, был не трезв, попутал =/

Код для этого примера, может пригодится

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
	html, body 
	{
		height: 100%;
		width: 100%;
		padding:0;
		margin:0;
	}
	.main
	{
		margin:0 auto;
		text-align:center;
		width:900px;
	}
	a:link, a:active, a:visited
	{
		width:264px; 
		height:50px;
		background:url(menu.jpg) no-repeat left top;
		color:#333333;
		text-decoration:none;
		display:block;
		float:left;
		padding-top:7px;
	}
	a:hover
	{
		background:url(menu.jpg) no-repeat left -60px;
		text-decoration:underline;
	}
</style>
</head>
<body>
	<div class="main">
		<a href="#">Menu 1</a>
		<a href="#">Menu 2</a>
		<a href="#">Menu 3</a>
	</div>
</body>
</html>

Edited November 2, 2008 by Anami

Sign In

двухэтажная картинка

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information