"Промельк" при hover

[Verder]

Есть вот такой макет на начальной стадии (тестовый, будет резиновый) - http://www.freeway-design.ru/test/

При раскрытии блока картинка мелькает на долю секунды. Вроде не критично, но очень раздражает.

Каким образом можно средствами css это убрать и можно ли вообще?

[SelenIT]

Насколько я понял, там по раскрытию секции "бая "аккордеона" подгружается другая фоновая картинка неслабых размеров?

Вариантов вижу минимум два — либо тихонько preload'ить картинки по onload страницы (вроде даже нагуглился плагин для того же JQ, кот. делает это автоматически), либо объединять подсвеченную и неподсвеченную картинки в один спрайт и различать состояния background-position'ом (высота секций ведь, насколько я могу судить, фиксирована?).

[Verder]

Насколько я понял, там по раскрытию секции "бая "аккордеона" подгружается другая фоновая картинка неслабых размеров?

Вариантов вижу минимум два — либо тихонько preload'ить картинки по onload страницы (вроде даже нагуглился плагин для того же JQ, кот. делает это автоматически), либо объединять подсвеченную и неподсвеченную картинки в один спрайт и различать состояния background-position'ом (высота секций ведь, насколько я могу судить, фиксирована?).

Да, фиксированная, может получится и спрайтами, спасибо.

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

[Great Rash]

Такая маленькая картинка, а весит целых 127 килобайт. Нафига так много? С каким качеством сохраняли?

[Verder]

Такая маленькая картинка, а весит целых 127 килобайт. Нафига так много? С каким качеством сохраняли?

Уже еще сжал, все равно такая же задница. Причем это не только на удаленном хосте, а и на локальной машине.

[mishka]

как бы я это сделал:

Картинку делать не бекграундом, а картинкой, чтобы ее легко можно было поменять через CMS. А дальше:

1й вариант.

Загружал бы сразу 2 варианта картинки, и цветную и чернобелую, прятал бы не через display: none, а через opacity: 0; При ховере показывал бы нужную картинку, а ненужную прятал бы, ну и наоборот.

Оригинальной картинки достаточно 1й (цветной), чернобелую генерил бы из цветной с помощью библиотеки на PHP для работы скартинками.

2й вариант.

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

Загружаем цветное фото, после обработки джсом получается чернобелое. При ховере делаем опять в цвете.

Недавно делал 2й вариант. Вот чего то хром и сафари отказались правильно работать. Если просто сделать картинки чернобелыми, и при ховере делать цветными - так пожалуйста, а как только в блок добавлялось еще кучка блочков ездящих, катающихся, всплывающих, уезжающих, так хром ломался. При чем что ие6 даже здорово работал.

Оставь фиксом, хотя бы эту страничку.

ИМХО, резина ее испортит.

[SelenIT]

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

[Verder]

как бы я это сделал:

Картинку делать не бекграундом, а картинкой, чтобы ее легко можно было поменять через CMS. А дальше:

1й вариант.

Загружал бы сразу 2 варианта картинки, и цветную и чернобелую, прятал бы не через display: none, а через opacity: 0; При ховере показывал бы нужную картинку, а ненужную прятал бы, ну и наоборот.

Оригинальной картинки достаточно 1й (цветной), чернобелую генерил бы из цветной с помощью библиотеки на PHP для работы скартинками.

2й вариант.

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

Загружаем цветное фото, после обработки джсом получается чернобелое. При ховере делаем опять в цвете.

Недавно делал 2й вариант. Вот чего то хром и сафари отказались правильно работать. Если просто сделать картинки чернобелыми, и при ховере делать цветными - так пожалуйста, а как только в блок добавлялось еще кучка блочков ездящих, катающихся, всплывающих, уезжающих, так хром ломался. При чем что ие6 даже здорово работал.

Оставь фиксом, хотя бы эту страничку.

ИМХО, резина ее испортит.

Ну на словах кажется все просто Но вот как на деле реализовать первый вариант пока что плохо представляю.

Вот как правильно прописать хз:

.kwicks {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	overflow:hidden;
}
.kwicks a {
	display:block;
	width:100%;
	height:100%;
	text-indent: -1000px;
}
.kwicks li{
	display: block;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
}

#example3 .kwicks li{
	width: 100%;
	height: 100px;
	margin-bottom: 1px;
}
#example3 #kwick1 { 
	background:url(i/s_1.jpg) no-repeat;
}

#example3 #kwick1:hover { 
	background:url(i/s_1h.jpg) no-repeat;
}

#example3 #kwick2 {
	background:url(i/s_2.jpg) no-repeat;
}
#example3 #kwick2:hover {
	background:url(i/s_2h.jpg) no-repeat;
}
#example3 #kwick3 {
	background:url(i/s_3.jpg) no-repeat;
}
#example3 #kwick3:hover {
	background:url(i/s_3h.jpg) no-repeat;
}
#example3 #kwick4 { 
	background:url(i/s_4.jpg) no-repeat;
	margin-bottom: none;
}
#example3 #kwick4:hover { 
	background:url(i/s_4h.jpg) no-repeat;
	margin-bottom: none;
}
#example3 #kwick5 { 
	background:url(i/s_5.jpg) no-repeat;
	margin-bottom: none;
}
#example3 #kwick5:hover { 
	background:url(i/s_5h.jpg) no-repeat;
	margin-bottom: none;
}

<script type="text/javascript">
$().ready(function() {
$('#example3 .kwicks').kwicks({
max : 274,
spacing : 0,
isVertical : true
});
});
</script>

<div id="example3">
				<ul class="kwicks">
					<li id="kwick1"><a href="#">Студия итальянской мебели</a></li>
					<li id="kwick2"><a href="#">Немецкие кухни</a></li>
					<li id="kwick3"><a href="#">Мебель для ванных комнат</a></li>
					<li id="kwick4"><a href="#">Мягкая мебель</a></li>
					<li id="kwick5"><a href="#">Детская мебель</a></li>
				</ul>
			</div>

[Great Rash]

Загружал бы сразу 2 варианта картинки, и цветную и чернобелую, прятал бы не через display: none, а через opacity: 0;

По моему лучше прятать при помощи visibility: hidden;, тогда для ИЕ не понадобятся фильтры.

UPD:

А еще, зачем юзать какой-то kwicks если есть родной аккордеон?

Опять же

[mishka]

По моему лучше прятать при помощи visibility: hidden;, тогда для ИЕ не понадобятся фильтры.

Согласен, но просто я еще предполагал что картинки из цветной в чернобелую можно плавно менять

А еще, зачем юзать какой-то kwicks если есть родной аккордеон?

У каждого свои задачи

Ну на словах кажется все просто Но вот как на деле реализовать первый вариант пока что плохо представляю.

Ну да, ПХПиста придеться поднапрячь, так зато потом какое удобство клиенту будет

ну если ПХПист напрягаться нехочет, то либо второй вариант, либо две картинки (что тоже мне ненравиться).

Ну ненравится мне background в таких вещах. Ну вот хочется мне чтобы я легко смог поменять те картинки не ковыряясь в CSS

Мебель для ванных комнат

Не самая удачная картинка для демонстрации мебели, так как взгляд упирается в ванную и унитаз, столик и кусочек спинки стула теряются.

Edited November 11, 2010 by mishka2

[rash]

Ну ненравится мне background в таких вещах. Ну вот хочется мне чтобы я легко смог поменять те картинки не ковыряясь в CSS

А что мешает такие вещи прописывать не в общем файле стилей, а в инлайн-css? Придется немного подкрутить CMS, но обновить урл будет существенно проще.

[mishka]

А что мешает такие вещи прописывать не в общем файле стилей, а в инлайн-css? Придется немного подкрутить CMS, но обновить урл будет существенно проще.

можно так.

Но.

Я за то чтобы генерить чернобелые картинки. Насколько я знаю для этого есть готовые решения.

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

[Verder]

В любом случае всем спасибо за советы, буду думать.

А пока пошел по пути наименьшего сопротивления и сделал полностью монохромный дизайн

http://freeway-design.ru/test/

Кстати, коли уж открыл тему. Страница офисов продаж - http://freeway-design.ru/test/map.html (линк с главной работает). Думаю, что и на этой странице больше не надо ничего.

Тултипы есть и бог с ними.

Мишка, может и правда фиксом оставлю

[mishka]

В чисто чернобелом варианте сстраничка потеряла процентов 50 эффектности, имхо.

[d0ublezer0]

У меня при просмотре ничего не мелькает. Пофиксил уже?

Я тоже делал на квиксе страничку, ничего, нормально вроде всё работает.

Edited November 12, 2010 by d0ublezer0

[Verder]

У меня при просмотре ничего не мелькает. Пофиксил уже?

Я тоже делал на квиксе страничку, ничего, нормально вроде всё работает.

Нет, не пофиксил, там сейчас просто монохромные картинки, а когда ставишь на hover цветную, появляется мелькание.

[d0ublezer0]

Посмотри мой линк в пред. посте - там тоже мелькает?

Edited November 12, 2010 by d0ublezer0

[Verder]

Посмотри мой линк в пред. посте - там тоже мелькает?

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

С такими условиями у меня тоже ничего не мелькает.

[d0ublezer0]

Не понял про "одни и те же". А у тебя они разве динамически меняются?

[Verder]

Не понял про "одни и те же". А у тебя они разве динамически меняются?

При наведении курсора на черно-белую область открывается картинка и становится полноцветной. Сейчас выложен монохромный вариант при котором ничего не мелькает.

[d0ublezer0]

Всё понял. Можешь дать отдельно ссылку на полноцветный вариант?

Хотя не, не надо, я тему не внимательно прочитал. То, что я хотел предложить, уже Медведь посоветовал.

Edited November 12, 2010 by d0ublezer0

[mishka]

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

както вчера пропустил твой комент.

Било 3 блока, с чернобелой картинкой, при ховере они плавно становяться цветными, и если убрать мышку, то опять чернобелыми. Но внутри блоков еще были выползающие попапчики. Так вот если их убирал, то все отлично работало. Как только ставил - в хроме, в первом блоке выводилось 2 нормальные картинки, и 2 сгенерированные, во втором и третьем все было правильно. В сафари вместо картинок все были черные поля.

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