Страница 1 из 1

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

СообщениеДобавлено: 20 апр 2008, 12:57
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 */
}

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