Главная » Статьи » ucoz » скрипты |
Порой бывает и так, что в нашем обиходе мы наталкиваемся на предметы, постоянно мозолящие нам глаза. И если от них нельзя избавиться, то непременно хочется убрать их подальше, с глаз долой. Вот лично для меня таким предметом в веб_дизайне всегда были эти пресловутые счётчики. Куда их не сунь, везде глаза мозолят. Но как то пару раз мне попадались очень интересные решения с картинками, когда изображение почти сливается с фоном, но стоит навести мышкой, как оно оживает. Мне очень понравилась эта идея и в последствии я встречал ее реализацию на счётчиках. И на мой взгляд это идеальнейшее решение для тех, кому эти счётчики режут глаз. Короче, я решил озаботиться этим вопросом и вот делюсь результатом, который весьма пришелся мне по душе. Перелопатив массу вариантов кодов и скриптов, я пришел к выводу, что ничего проще простого кода css просто не существует, уж простите за тавтологию. Идеальный по исполнению и гениальный по свой простоте это код основан на простой прозрачности {opacity} и простом выделении {a hover}. Вот как выглядит этот код: {Вставляем его либо в html-код между тегами "< head >",либо в свой css файл, у кого стили прописаны отдельным файлом}
Code <style type="text/css"> <!-- #codeblock a img { opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40); } #codeblock a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } --> </style> Далее необходимые нам изображения заключаем в соответствующий DIV. Примерно вот так… Code <div id="codeblock"> <a href="#"><img src="cnt.gif" border="0"></a> <a href="#"><img src="cycounter.gif" border="0"></a> <a href="#"><img src="hit.gif" border="0"></a> <a href="#"><img src="img.gif" border="0"</a> </div> И наслаждаемся результатом. | |
Просмотров: 686 | Комментарии: 2 | Рейтинг: 0.0/0 |
Всего комментариев: 1 | |
| |
Добавить в самый низ css:
Code
/* ----////// Эффект прозрачности /////------- */
#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
Это добавляем туда, где будут ваши баннеры, кнопки и т.д.:
Code
<div id="banners">Между этим кодом ваши счётчики, кликабельные картинки и т.д.</div> Написано от (20.10.2010 16:09) Цитировать --------- Комментарий -------