Эффект прозрачности изображения можно добится не только фильтрами 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 обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.