Эффект перекатывания - вопрос.

Sheena · May 10, 2008

www.alexey-shingirey.narod.ru

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

Razor · May 10, 2008

А в чем вопрос?)

Код не смотрел - ну может там картинка медленно подгружается...

Tokolist · May 10, 2008

используйте CSS-спрайт

Иван Шумов · May 10, 2008

Все просто - картинка весит 61Kb, отсюда и время на е? загрузку ...

http://cssing.org.ua/2005/09/27/preload-by-css/

вот вкусная ссылочка на решение такой проблемы

Sheena · May 10, 2008

Всем спасибо

Sheena · May 10, 2008

Не получилось

Иван Шумов · May 10, 2008

значит проблема в руках

Sheena · May 10, 2008

a.logo {
 background: url(?/img/gif/as-logo.gif?) no-repeat 0 0;
 }
 a.logo:hover {
 background-position: 0 -40px;
 }
 a.logo:active, a#here {
 background-position: 0 -80px;
 }

и вот

<a href="http://www.alexey-shingirey.narod.ru" class="logo"></a>

Иван Шумов · May 10, 2008

ты смысла не понял - пошел обратно читать и какого фига у тебя путь в 2х кавычках подряд?

Sheena · May 10, 2008

Почему тут - www.s-web-art.narod.ru/links.html на месте слова here не отображается фон??? Хотя если нажать ЭПоказать фоновое изображение" вс? показывает, правильное изображение.

Иван Шумов · May 10, 2008

Ну во-первых ты категорически неправ

<style type="text/css">
 body {background-color: black; background-position: top;}
 table {background-color: black; text-align:middle; font-weight: normal;}
 td {text-align:center; font-weight: normal;}
 .back {background-image: url('img/back.jpg'); text-align:center; font-weight: normal;}
 .tableback { background-image: url('img/tableback.jpg'); text-align:left; font-weight: normal;}
 font {color:white; font-size:18pt; font-family:times; text-align:center}
</style>

вот так надо)))

2) а во-вторых надо это делать все праааавильно)

<html>
<head>
<title>title</title>


<style type="text/css">
body {background: #000000;}

#block1 { height: 400px; width: 800px; background: url('img/back.jpg') repeat-x; text-align:center; }

#block2 { height: 40px; width: 800px; background: url('img/tableback.jpg') repeat-x; text-align:center;
 color:white; font-size:18pt; margin: 175px 0; float: left; clear: both; padding-top: 10px;}

</style>

</head><body>



<div id="block1">

 <div id="block2">

 here

 </div>

</div>



</body>
</html>

мой код конечно тоже можно немного обругать - но это гораздо лучше чем у тебя ... и еще - картинки сделай в 1px шириной :-D

Shuranka · May 10, 2008

Да, скорее всего проблема в объ?ме картинки. После загрузки логотипа навел на него указатель и... изображение совсем пропало секунды на три. Далее вс? нормально. Второе, в FF и NN выравнивание по центру в IE и Opera по левому краю. Раздел меню "В скором" в IE почти не видно(особенно верхнюю часть), т.к цвет шрифта белый на серебристом фоне, хотя в других браузерах цвет шрифта меню ч?рный.

Shuranka · May 10, 2008

Пересохрани изображения в Фотошопе (Сохранить для WEB) в GIFe и попробуй следующий код:

a.logo { background:url(as-logo.gif);
 display: block;
width: 240px;
 height: 480px; 
 border: 0px; 
}
a.logo:hover {
background:url(as-logo-after.gif);
display: compact;
}

Правда не знаю, что это за значение compact, к атрибуту display (не наш?л описания), но у меня данный пример работает нормально.

Sheena · May 11, 2008

О, Shuranka, получилось) Только я вместо GIFa JPG оставил

Shuranka · May 11, 2008

Я пробовал в jpg, мигает в Опере и ИЕ.

Sheena · May 12, 2008

Да, у меня мигает везде с jpg и с gif вроде

Sign In

Эффект перекатывания - вопрос.

Question

Link to comment

Share on other sites

15 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

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

Обсуждения

Important Information