Прозрачность картинки при наведении курсора мыши.

Архив полностью рабочих скриптов и так далее...
Закрыто
Аватара пользователя
AllCity
Сообщения: 2508
Зарегистрирован: 18 апр 2008, 17:52
Контактная информация:

Прозрачность картинки при наведении курсора мыши.

Сообщение AllCity »

Изображение

Поставь это в CSS

Код: Выделить всё

a:hover img {
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+ */
    -moz-opacity: 0.5; /* Mozilla 1.6- */
    -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
    opacity: 0.5; /* CSS3, Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
    filter: alpha(opacity=50); /* IE 4 */
}


если надо для определённого участка то помещаем его в div или span с ID
пример:

Код: Выделить всё

<div id="image1"><a href="http://top.mail.ru/jump?from=1438129" target="_top"><img src="http://counter.rambler.ru/top100.cnt?1421104" alt="Rambler's Top100" border="0" width="0" height="0"></а></div>

как видите я указал ID (image1)
все это осталось это прописать в css ID

Код: Выделить всё

#image1 a:hover img {
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+ */
    -moz-opacity: 0.5; /* Mozilla 1.6- */
    -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
    opacity: 0.5; /* CSS3, Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
    filter: alpha(opacity=50); /* IE 4 */
}


а чтоб сделать эффект что б картинка по началу прозрачная, а когда наводишь нормальная то это в ставим в CSS

Код: Выделить всё

a img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+ */
-moz-opacity: 0.5; /* Mozilla 1.6- */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3, Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
filter: alpha(opacity=50); /* IE 4 */
}

a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100); /* IE 5.5+ */
-moz-opacity: 1; /* Mozilla 1.6- */
-khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
opacity: 1; /* CSS3, Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
filter: alpha(opacity=100); /* IE 4 */
}

Вот и все! кто хочет может посмотреть полезную инфу о прозрачности картинок здесь.
Закрыто