Прозрачность картинки при наведении на нее курсора мыши через CSS
(3 голосов, средний: 4.67 из 5)
Loading ...В этом примере рассказывается о том, что при наведении на картинку курсор мыши, ее прозрачность становилась 80%-ной(чтобы она была потусклее), а на неактивной картинке оставалась 100%-ной. Пример можно посмотреть здесь, не работает в InternetExplorer. Далее следует небольшое описание как это сделать.
Создайте файл css.css и вставьте в него следующий код:
a img:hover {
filter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
}
Затем создайте файл index.html и вставьте в него следующий код
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=window-1251″ />
<title>Прозрачность картинки при наведении на нее курсора мыши через CSS</title>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
</head><body>
<p><a href=”http://flashripper.net/demoblog/” target=”_blank”><img src=”16r.gif” border=”0″/></a></p>
<p><a href=”http://flashripper.net/demoblog/” target=”_blank”><img src=”18r.gif” border=”0″ /></a></p>
<p><a href=”http://flashripper.net/demoblog/” target=”_blank”><img src=”17r.gif” border=”0″ /></a></p>
</body>
</html>
На этом все, теперь вам осталось только вставить свои изображения и наслаждаться полученным результатом.
Дополнительно:
Похожие записи по теме:
Понравилась статья? Если да, то не забудьте ее прокомментировать. Многим будет интересно прочитать ваше мнение. А если понравился сайт, не забудьте добавить его в закладки и подписаться на обновление сайта по RSS.
Эта запись опубликована Пятница, Октябрь 26th, 2007 в 18:21 Рубрики: Ссылки, Статьи по JS, CSS, HTML. Подпишитесь на RSS 2.0 ленту комментариев. Вы можете оставить комментарий или трекбек со своего сайта.
а зачем неработающий пример даёте ?
Почему не работающий, все работает прекрасно, кроме броузера InternetExplorer ???
Попробовал - все работает! Может пригодится.
Все прекрасно работает
в ИЕ7 не работает.