Эффект прозрачности изображения можно добится не только фильтрами IE, но и стандартными средствами CSS. При этом эффект будет отображатся под любым браузером.

Создание эффекта прозрачности в Internet Exlorer осуществляется при помощи фильтра alpha(opacity=n), где n - степень прозрачности в процентах (0-100). Чем меньее n, тем прозрачнее изображение. Пример:

< img src='picture.jpg' style='filter:alpha(opacity=60)'>

Данный фильтр будет работать только под IE. Для создания аналогичного эффекта в других браузерах используется свойство CSS - opacity. При этом, значение коэффициентра прозрачности лежит от 0 до 1. Пример:

< img src='picture.jpg' style='opacity: 0.6'>

Соответственно, что бы эффект отображался под любым браузером необходимо совместить оба свойства:

< img src='picture.jpg' style='filter:alpha(opacity=60); opacity: 0.6'>

при этом IE проигнорирует свойство opacity, а Mozilla и Opera проигнорируют filter.

В статье "Эффект плавного перехода на JavaScript" рассматривался пример использования плавной смены картинок при помощи фильтра прозрачности для IE. Предлагаем вашему внимаю аналогичный эффект, но работающий и под IE, и под Opera с Mozilla:

< script language=JavaScript>

var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=1;
m[1]-=1;

document.getElementById("a1").style.opacity = m[1]/100;
document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("a2").style.opacity = m[0]/100;
document.getElementById("a2").style.filter="alpha(opacity="+m[1]+")";

t[0] = setTimeout("next()",5);
if (m[0]>98) clearTimeout(t[0]);
}
< /script>

HTML код:

< div id=a1 style='position: absolute; top: 100px; left: 100px'>
< img src='picture1.jpg'>
< div>
< div id=a2 style='position: absolute; top: 100px; left: 100px; opacity: 0'>
< img src='picture2.jpg'>
< /div>
< div onclick='next()' style='cursor: pointer'>
Посмотреть эффект
< /div>

Результатом работы скрипта будет вот такой симпатичный эффект плавной смены картинок. При этом, в div, где расположены картинки, можно загонять не только изображения, но и текст и другие объекты.



Постоянные ссылки

При копировании ссылка на TeaM RSN обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Оставить комментарий

Вы должны войти, чтобы оставить комментарий.