| jПример Шаг 1. Скачаем и подключим jQuery к нашему документу:
Code <script type="text/javascript" src="jquery.js"></script> Шаг 2. Между тегами или в отдельном CSS файле пропишем следующие стили: Code body {
background: #534741;
font-family: Helvetica, Arial, sans-serif;
color: #fff;
width: 810px;
margin: 0 auto;
padding-bottom: 50px;
}
#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}
Обратите внимание, что фоновый цвет страницы (в данном случае стиль
тега ) должен быть точно такой же, как и цвет по краям у картинки шапки.
Для шапки нужно использовать картинку, которая условно состоит
из двух частей: верхняя половина - это картинка до наведения мышью, а
нижняя - после. 
В нашем случае используется картинка размером 400х450 px.
Следовательно, половина ее высоты равна 225 px (эта высота прописана в
стиле #header). И если высота Вашей картинки будет другая, то ее
нужно изменить в CSS стиле, а также изменить отступ no-repeat 0 -240px в
стиле #header .fake-hover, умножив половину высоты картинки на -1,0667.
Т.е. 225 х -1,0667 = -240 Если же половина высоты картинки будет 150 px, то: 150 х -1,0667 = -160 Шаг 3. Между тегами пропишем следующий скрипт: Code <script type="text/javascript">
var Header = {
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");
});
</script> Шаг 4.
В начале тела документа (после открывающегося тега ) вставим блок шапки
с идентификатором header, в качестве ссылки укажем произвольный текст
(в данном случае Header) Code <div id="header"><a href="">Header</a></div> Вот и все! Надеюсь, этот эффект пригодится Вам в дизайне сайтов!
Понравилась статья-Жми +1
Нравится
[
Получить прямую ссылку на новость
][
Скрыть ссылки ]
| 
