Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.141.32.53
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Кнопка скачать с эффектом изменения цвета
Сообщение оставлено 24.07.2011 в 02:27:47 | Сообщение #1

Интересный скрипт для Каталога файлов. Красивая кнопка загрузки файла. Также при наведении курсора на кнопку она меняет цвет!
Установка:
Это в head:
Code
<script type="text/javascript" src="http://scripts.inf.ua/script/dl/jq.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://scripts.inf.ua/script/dl/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://scripts.inf.ua/script/dl/twobuttons.png);   
}   
.homebutton {   
float: left;   
width:120px;   
height:38px;   
display:block;   
background-image:url(http://scripts.inf.ua/script/dl/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://scripts.inf.ua/script/dl/twobuttons.png);   
}
Код самой кнопки:
<table border='0' cellspacing='0' cellpadding='0' align='center' background='http://scripts.inf.ua/script/dl/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>
 
 
   
Сообщение оставлено 24.07.2011 в 07:11:28 | Сообщение #2
Переместил в раздел ''Каталог файлов''
 
 
   
Сообщение оставлено 24.07.2011 в 09:58:13 | Сообщение #3
Красиво, спасибо за скрипт
 

Продам Steam-аккаунты по низким ценам, писать в ЛС
 
   
Сообщение оставлено 24.07.2011 в 10:49:20 | Сообщение #4
Классный скрипт , спасибо! happy
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика