В этом примере рассказывается о том, что при наведении на картинку курсор мыши, ее прозрачность становилась 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>
На этом все, теперь вам осталось только вставить свои изображения и наслаждаться полученным результатом.
Дополнительно:
Портал посвящен веб разработчикам и созданию сайтов. На сайте вы сможете найти статьи по раскрутке и оптимизации сайта. Все для программы Adobe Photoshop, шрифты, иконки, шаблоны сайтов, уроки графики и веб дизайна.
Эта запись опубликована 26 октября 2007 года. Рубрики: Разное. Подпишитесь на RSS ленту комментариев для данной записи и будьте всегда в курсе обсуждения. Также вы можете оставить комментарий или трекбек со своего сайта.
а зачем неработающий пример даёте ?
Почему не работающий, все работает прекрасно, кроме броузера InternetExplorer ???
Попробовал – все работает! Может пригодится.
Все прекрасно работает
в ИЕ7 не работает.
Для ослика фильтер-> альфа – и всё будет работать
Меня постоянно раздражает то, что люди гонят на IE6. Вся красота в верстке заключается в том, чтобы красиво сверстать именно для этого браузера, для FF и Opera сверстать может и дурак(особенно если у него есть дримувер). Все финтиклюшки которые не работают в ИЕ6, для коммерческих проектов не катят.
А теперь, чтобы не быть голословным (потому что врядли человек, который увидит мой блог, подумает, что я что-то понимаю в разметке), лёгким движением руки, сделаю так чтобы оно заработало в ИЕ6 :
a:hover img {opacity:0.5; /*все нормальные современные браузеры понимают */
-khtml-opacity:0.5; /*для конуэрора, но вроде есть баги*/
filter:alpha(opacity=50); /*для IE*/
}
Как видите, всё просто. Ховер вешаем к ссылке (ие6 понимает ховер только для ссылок). Я стараюсь выкручиватся ссылками с display:block; и тогда ненужно придумывать яваскрипты, для того чтобы заставить дивы и прочие элементы понимать :hover.