Если вы хотите сделать со счетчиком что-то очень оригинальное можете все таки
использовать полупрозрачные png.
Изменения, которые мы должны внести в код счетчика, выделены цветом, как видите
немного.
Разрыв строки обозначен символом »
view plaincopy to clipboardprint?
<!--begin of Top100 logo--> <br>
<div class="counter"><a h_ref="http://top100.rambler.ru/top100/">
<br>
<img
src="http://top100-inferno.rambler.ru/%20»<br%20/>top100/banner-88x31-rambler-gray2.gif"
alt="" /> alt="Rambler's Top100" width="88" <br>
height="31" border="0"/></a><!--end of Top100
logo -->
Дальше нам нужно разместить span над изображением счетчика и в качестве фона
использовать маску, которую мы только что создали.
view plaincopy to clipboardprint?
div.counter {
position:relative; // чтобы span позиционировался
// относительно этого элемента
width:88px;
height:31px;
}
.counter a { display:block; }
.counter a span {
position:absolute; // используем абсолютное
// позиционирование чтобы разместить
// span над изображением счетчика
top:0px;
left:0px;
width:88px;
height:31px;
display:none; // скрываем span
background:<A href="http://pronets.ru/tag/url/" class="st_tag internal_tag" rel="tag"
title="Записи, помеченные с URL">url</A>(mask.png);
}
.counter a:hover span {
display:block; // показываем span
// при наведении мышки на счетчик
}
* html.counter a:hover span {
display:none; // IE6 не поддерживает полупрозрачные png…
}
* html.counter a:hover img {
filter: alpha(opacity=60); // …заменяем их фильтром
}
Более интересный эффект к сожалению в IE6 не работает, но поскольку пользователи
уже начали понемногу переходить на IE7 и другие нормальные браузеры, то этот
вариант тоже имеет право на существование. |
Главная
Каталог файлов
