Каталог статей
| Главная » Статьи » Web-мастерам » Скрипты для Ucoz и не только |
Рамка во круг аватара.
Автор: tester-disru | Дата: 10.02.2012 | Просмотров: 352 |
Рамка во круг аватара которая при наведении меняет цвет.
И так приступим:
На первый взгляд кажется что это сложно сделать - но на самом деле все очень просто :)
1) Загрузим на сервер картинки: http://dis-design.ru/Primeri/img.rar
2) Создадим файл CSS:
Code
.conTopLeft {width:3px;height:3px;background:transparent url('../images/cnl.gif') no-repeat 0 0;overflow:hidden; }
.conTopRight {width:3px;height:3px;background:transparent url('../images/cnr.gif') no-repeat right 0;overflow:hidden;}
.conTopCenter {height:3px;background:#EDF2F5 url('../images/cnc.gif') repeat-x 0 0;overflow:hidden;margin:0 2px;}
.conBotLeft {width:3px;height:3px;background:transparent url('../images/cnbl.gif') no-repeat 0 0;overflow:hidden; }
.conBotRight {width:3px;height:3px;background:transparent url('../images/cnbr.gif') no-repeat right 0;overflow:hidden;}
.conBotCenter {height:3px;background:#EDF2F5 url('../images/cnbc.gif') repeat-x 0 0;overflow:hidden;margin:0 2px;}
.conMidLeft {background:transparent url('../images/cnml.gif') repeat-y 0 0; }
.conMidRight {background:transparent url('../images/cnmr.gif') repeat-y right 0;}
.conMidCenter {background-color:#EDF2F5;margin:0 3px;padding:3px;}
.containerO .conMidCenter {background-color:#BDCFD7;margin:0 3px;padding:3px;}
.conSpacer {width:3px;}
3) Далее в шаблоне вызываем CSS файл:
Code
<link rel="stylesheet" type="text/css" href="CSS/Pers.css" />
4) И теперь во круг аватара ставим рамку:
Code
<div align="center"><table border="0" cellpadding="0" cellspacing="0"><tr><td>
<div class="container" onmouseover="this.className='containerO';" onmouseout="this.className='container';">
<table border="0" cellpadding="0" cellspacing="0"><tr><td class="conTopLeft"></td><td class="conTopCenter"></td><td class="conTopRight"></td></tr>
<tr><td class="conMidLeft"><img src="images/1px.gif" class="conSpacer" /></td>
<td class="conMidCenter">
<img src="images/Ваш Аватар.jpg" /></td><td class="conMidRight"><img src="/images/1px.gif" class="conSpacer" />
</td></tr>
<tr><td class="conBotLeft"></td><td class="conBotCenter"></td><td class="conBotRight">
</td></tr></table></div></td></tr></table></div>
<div class="container" onmouseover="this.className='containerO';" onmouseout="this.className='container';">
<table border="0" cellpadding="0" cellspacing="0"><tr><td class="conTopLeft"></td><td class="conTopCenter"></td><td class="conTopRight"></td></tr>
<tr><td class="conMidLeft"><img src="images/1px.gif" class="conSpacer" /></td>
<td class="conMidCenter">
<img src="images/Ваш Аватар.jpg" /></td><td class="conMidRight"><img src="/images/1px.gif" class="conSpacer" />
</td></tr>
<tr><td class="conBotLeft"></td><td class="conBotCenter"></td><td class="conBotRight">
</td></tr></table></div></td></tr></table></div>
|
| ||
| ||
