Скачаем и подключим jQuery к нашему документу
Code
<script type="text/javascript" src="jquery.js"></script>
Между тегами <head> или в отдельном CSS файле пропишем следующие стили:
Code
body {
background: #534741;
font-family: Helvetica, Arial, sans-serif;
color: #fff;
width: 810px;
margin: 0 auto;
padding-bottom: 50px;
}
#header {
Обратите внимание, что фоновый цвет страницы (в данном случае стиль тега <body>) должен быть точно такой же, как и цвет по краям у картинки шапки. Для шапки нужно использовать картинку, которая условно состоит из двух частей: верхняя половина - это картинка до наведения мышью, а нижняя - после.
В нашем случае используется картинка размером 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.
Между тегами <head> пропишем следующий скрипт:
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. В начале тела документа (после открывающегося тега <body>) вставим блок шапки с идентификатором header, в качестве ссылки укажем произвольный текст (в данном случае Header)
Code
<div id="header"><a href="">Header</a></div>
Вот и все! Надеюсь, этот эффект пригодится Вам в дизайне сайтов!
Пример
Скачать
