ПРИМЕР
Шаг 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>
Вот и все! Надеюсь, этот эффект пригодится Вам в дизайне сайтов!
Комментарии: