Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Кнопка скачать с эффектом изменения цвета

Главная » Скрипты для uCoz » Кнопка скачать с эффектом изменения цвета
Кнопка скачать с эффектом изменения цвета для uCoz
До наведения на кнопку:

После наведения на кнопку, плавно изменяется цвет:



Установка:
Это в <head>:
Code
<script type="text/javascript" src="http://rucoz.com/img/other/okno/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.homebutton,.downloadbutton').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});
</script>

Это вставляем в CSS:
Code
.downlod_title {
font-family: tahoma;
font-size: 10px;
color: #FFFFFF;
padding-top: 2px;
height: 23px;
}
.downlod_footer {
font-family: tahoma;
font-size: 10px;
color: #FFFFFF;
padding-bottom: 2px;
height: 23px;
}
.downloadbutton {
float: left;
width:107px;
height:38px;
display:block;
background-image:url(http://rucoz.com/img/twobuttons.png);
background-position: top right;
}
.downloadbutton span.hover{
position: absolute;
display: block;
width:107px;
height:38px;
background-position: bottom right;
background-image:url(http://rucoz.com/img/twobuttons.png);
}
.homebutton {
float: left;
width:120px;
height:38px;
display:block;
background-image:url(http://rucoz.com/img/twobuttons.png);
background-position: top left;
}
.homebutton span.hover{
position: absolute;
display: block;
width:120px;
height:38px;
background-position: bottom left;
background-image:url(http://rucoz.com/img/twobuttons.png);
}

Код самой кнопки:
Code
<table border='0' cellspacing='0' cellpadding='0' align='center' background='http://rucoz.com/img/downlod.png' wight='220' height='84'>
<tr>
<td align='center' class='downlod_title'>$ENTRY_TITLE$</td>
</tr>
<tr>
<td><a href='$FILE_URL$' class='homebutton'></a>
<a href='$RFILE_URL$' class='downloadbutton'></a></td>
</tr>
<tr>
<td align='center' class='downlod_footer'>Загрузок $LOADS$</td>
</tr>
</table>
Просмотров: 1132 | Комментариев: 0 | Опубликовал: DizeL | Дата: 24.10.2010

 05.11.2009   

 

 Мини-Чат на AJAX ок... 

 11.02.2011   

 

 Красивый вид опроса... 

 06.11.2009   

 

 Ссылки как на DLE 

 19.09.2009   

 

 новая форма входа 

 14.03.2010   

 

 flash часы 


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.