Главная » Администрирование сайта » Работа со стилями (CSS) » Полупрозрачность картинок-ссылок

Полупрозрачность картинок-ссылок

16.09.2009 в 19:29
Автор: G-XPert

Идём в шаблон CSS, и в любое место вставляем код:
Code
#inviz a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}

#inviz a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

Теперь чтобы сделать картинку-ссылку полупрозрачной окружаем её тегами: <div id="inviz">...</div>
Будет выглядеть так:
Code
<div id="inviz"><a href="http://site.ru"><img src="http://ssilka.na.kartinky"></a></div>

А чтобы сделать просто картинку (без ссылки) полупрозрачной (а при наведении на неё курсора - нормальной), так же окружаем картинку тегами:
<div id="inviz">...</div>
А выглядеть будет так:
Code
<div id="inviz"><a><img src="http://ssilka.na.kartinky"></a></div>

Где тег <a> - так и оставляем.

Также можно сделать, что бы на всей странице все картинки-ссылки были полупрозрачные. Для этого просто в шаблоне страницы после тега <body> ставим <div id="inviz">, а перед тегом </body> ставим - </div>

Вот и всё :)

Чуть не забыл, пример (наведите на картинку мышкой):



Без ссылки:

прозрачность картинок, ссылок


Рейтинг: 18  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 5151          Комментариев: 3
08.11.2012 в 08:56      0  

респект автору
07.03.2012 в 23:05      0  

+ полезная статья

Mhirbie

Спам
28.02.2012 в 07:36      0  

I'm out of laegue here. Too much brain power on display!