Главная » Администрирование сайта » Работа со стилями (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>

Вот и всё :)

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



Без ссылки:

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


Рейтинг: 20  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 7235          Комментариев: