В сегодняшнем уроке Вы узнаете как сделать красивый эффект для кнопки или любого изображения.
Все это будет сделано с помощью нашего любимого jQuery,
Первым делом нам необходимо поместить этот код между тегами <head></head>.
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#rss a')
.append('<span class="hover" id="rsscolor"/>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(800, 1);
}, function () {
$span.stop().fadeTo(800, 0);
});
});
});
</script>
Тут все стандартно - подключаем фреймворк и функцию.
Далее придаем немного стиля:
<style>
body{
background:#000;}
#rss{
width:300px;
height:225px;
margin:auto;
position:relative;
display:block;}
#rss a{
background-image:url(rss_bw-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
width:300px;
height:225px;
}
#rss span.hover{
width:300px;
height:225px;
background-image:url(rss-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;}
</style>
И в конце вставляем таким образом само изображение:
<div id="rss"><a href="#" title="fancy rss"></a></div>
Получился довольно неплохой эффект, который при полете фантазии можно легко приделать к чему угодно!
Спасибо за внимание! Всем успехов!!!