[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Кнопка скачать с эффектом изменения цвета для uCoz
Дата: Суббота, 20.08.2011, 14:24 | Сообщение # 1
Администратор
    Сообщений:
    841
    Награды:
    2

Установка:
Это в 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);     
   }

Код самой кнопки:
Code
<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>
  • Страница 1 из 1
  • 1
Поиск: