Эффект прозрачности в JavaScript

Эффект прозрачности изображения можно добится не только фильтрами 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, где расположены картинки, можно загонять не только изображения, но и текст и другие объекты:

Посмотреть эффект

Повтор эффект

webobzor.net

Badong  20.02.2007  09:32 Хм... Работает, говорите?) Пробовал Оперой - болт, пробовал Мозилкой - болт, ие (беее... мерзость) даже попробовал... Грустно.

intelll   20.02.2007  13:37 чето не работает в Опере однако!..

lexa  25.02.2007  22:20 Однако надо включить в браузере поддержу JavaScript, у меня все замечательно работает

ника   12.03.2007  12:26 А как можно этот эффект применить при переходе от одной веб страницы к другой? Заранее благодарен......

lexa  13.03.2007  15:24 Скоро выложу пример

iamd  16.03.2007  18:44 опера и прочие мозиллы - прихоти недалеких людей. Один фиг 85% используют человеческий эксплорер. Так зачем подстраиваться под извращенцев/мазохистов с левыми браузерами?

lexa   23.03.2007  04:48 Когда то я тоже так думал... но на самом деле, если даже из жизни пример взять. В мире 97% здоровых людей и 3% инвалидов, но ведь для инвалидов делают скидки, сооружают специальные места в автобусах, подстраиваются под них. В случае с другими браузерами - это просто уважение ко всем БЕЗ исключения пользователям, несмотря на то, каким браузером они пользуються.

kecl  05.04.2007  13:04 Ага, пользуйся lynx-ом и требуй соблюдения своих прав ))

lexa   05.04.2007  22:00 Да, линуксоиды тоже люди )

titaniMOZG   18.04.2007  11:39 Я под Оперой 9.1. смотрел, и все прекрасно отображалось... Отличный скрипт!

vot   27.04.2007  17:27 if (window.ActiveXObject) obj.style.filter = "alpha(opacity=" + m[1]+ ")"; else obj.style.opacity = m[1]/100; -- так думаю несколько правильней намек! практически для всех бр. style.cssText = "FILTER: alpha(opacity=50); moz-opacity: 0.5; opacity: 0.5; khtml-opacity: 0.5;"

dp  01.05.2007  10:28 Отлично работает на  Safari, FF2, Opera 9.10 для мака. Респекты.

lexa  01.05.2007  22:57 Супер, спасибо за инфу, а то под маком затруднительно проверить )

MeXaon  05.05.2007  21:22 Спасибо очень красиво получается. 2iamd Я раньше тоже так думал, но сначала решил проверить за что же так хвалят оперу, я на тот момент кроме оперы и эксплорере ни о чем не слышал. Опера мне понравилась больше, но ее плохое отображение страниц меня напрягало потом. Узнал об FireFox и вот что тебе скажу я теперь не представляю свою жизнь без этого браузера с его огромным колличеством расширений(плагинов).

Я  06.05.2007  16:13 Вот уж кого-кого, а юзеров FireFox и Opera я бы не стал сравнивать с инвалидами. С инвалидами можно сравнить юзеров IE (75%, кстати), который криво отображает сайты, глючный и ненадёжный. Кстати, именно эти люди являются мазохистами;) P.S.:15% в Рунете - это несколько миллионов (!!!) человек.

lexa  07.05.2007  03:54 Неужели, а ты в курсе что первоначально IE поддерживал наибольшее число стандартов, что он внес наибольший вклад в W3C стандарты?

omega  22.05.2007  12:34 Не браузер страници криво паказывает, а сайтописатели их криво пишут.

Biggieman  28.05.2007  00:27 2lexa: Ну если внёс, то что же не поддерживает тогда эти самые стандарты?!

Biggieman  28.05.2007  00:32 Но за скрпит пасиб )) Пригодился )))

lexa  28.05.2007  00:39 IE поддерживает наибольшее количество стандартов из числа всех браузеров. Я где-то писал статью об истории JS, и там все детально описано про браузеры что и как.

lexa  28.05.2007  00:40 Тут статья, всем рекомендую, кто не любит IE http://www.art.webobzor.net/art/105.php почитать, подумать :)

set3  06.06.2007  22:04 В ИЕ изображение переходит как-бы рывками, дрожжит что-ли.. а в Ёпере плавно очень, ступеньки перехода не заметны.

set3  06.06.2007  22:08 Не то чтобы кто-то ненавидел ИЕ,.. просто ИЕ - это пережитки прошлого.

Бенитес   08.06.2007  23:12 Скажите, пожалуйста, что из ниже приведенного кода нужно выкинуть, если все что мне нужно, так это затемнить счетчики в "подвале" сайта. Т.е. мне не нужны лишние функции в коде. Спасибо. 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]); }

lexa  08.06.2007  23:27 тебе необходимо код счетчика вставить между ... и соответственно убрать все, где идет обращение к элементу a2, то есть две строчки document.getElementById("a2").style.opacity = m[0]/100; document.getElementById("a2").style.filter="alpha(opacity="+m[1]+")"

lexa  08.06.2007  23:28 счетчик надо вставить в div id="a1"

w0rtex   08.07.2007  17:22 Скрипт отлично работает, но можете подсказать, каким ещё методом можно наложить одну картинку на другую? Мне бы хотелось чтобы я смогу добавить эти два блока прямо в таблицу. без указания top i left.Заранее спасибо.

lexa  09.07.2007  11:08 Две картинки ты никак не наложишь без позиционирования position: absolute, есть правда еще position:relative, почитай о нем, возможно получится так

w0rtex   09.07.2007  22:33 Может есть функция в ява скрипте для того чтобы узнать position элемента?

lexa  10.07.2007  18:17 есть, document.getElementById(...).style.top и есть, document.getElementById(...).style.left :))

yobllik  23.07.2007  00:14 iamd ты долбоеб если считаешь ИЕ нормальным браузером. в мире процентов 90 гопарей и мудаков и добрая часть их юзает ИЕ а здоровые люди используют оперу или ФФ

Sister  03.08.2007  17:37 omg! iamd, lexa - убейтесь

Sister  03.08.2007  17:43 Ладно, погорячился) но IE популярен ТОЛЬКО потому, что сразу установлен на винды

lexa  03.08.2007  19:12 Sister, я всегда после установки винды ставлю оперу и мозиллу (так сказать, необходимы по работе). Более того, я использую myIE, с закладками, а не чистые IE, у меня нет проблем с всплывающими окнами и выпадающими кучей окон. Хотя в последнее время (месяца два) больше мозиллой пользуюсь, там просто плагины для веб программиста есть хорошие.

titaniMOZG    08.08.2007  19:15 Кстати, в ИЕ он выполняется как то тормазнуто, а в Сафари, например, раза в 3 быстрее... В чем прикол может быть???

lexa  09.08.2007  00:26 Разные браузеры по разному работают. Выход: определять скриптом что за браузер и соответственно корректировать шаг.

Sister  10.08.2007  09:57 lexa: так поступают нормальные люди. Увы, таких немного(

alex    21.10.2007  12:58 Статистика использования боузеров на примере моего сайта Explorer 6 57.1% Opera 9 15.8% Explorer 7 11.8% Firefox 2 7.8% Opera Mini 2.8% Opera 8 1.9% Firefox 1 1.2% Opera 7 0.4% Explorer 0.4% Safari 2 0.3% Значит нужно не обзывать пользователей какого-то броузера уродами, а просто пытаться оптимизировать код с учетом всех вкусов

Васыль   27.10.2007  09:36 А оптимизировать код под все браузеры невозможно, потому что если можно в лисе сделать округлые таблицы, то в других таких функций нет, или использовать только основные и те функции которые есть во всех браузерах

lexa  29.10.2007  08:47 Есть специальный скрипт, который делает закругленные таблицы под любой браузер

Sterh  04.03.2008  15:54 Плз, подскажите, все отлично работает, но когда ставлю размер шрифта в ИЕ 24px, то при появлении шрифт становится рубленным, прозрачные пиксели становятся в 100% и выглядит просто ужасно! Можно ли этим как-то бороться ?.. Заранее большое спасибо!

lexa29  05.03.2008  14:00 вроде как можно использовать свойство сглаживания шрифта, не помню как оно называется, но точно знаю, что оно есть.

TON1K    08.04.2008  00:32 народ - а как сделать обратный ход - ну как на примере - туда и обратно ..тоесть нажал на текст - появилась одна картинка, нажал на другой - появилась первая.... ps - если можно - напишите на мыло ton1k@ton1k.net

lexa  08.04.2008  12:22 на форуме смотри, там такое есть

lexa  08.04.2008  13:35 А вообще статья про слайдшоу тут http://art.webobzor.net/art/125.php

ddvhouse  09.04.2008  07:48 lexa, а как обратиться через яву к a:link и a:hover ?

lexa29  09.04.2008  12:13 хм,а зачем к ним обращаться? если просто к ссылке через JS, то просто document.anchors("name ссылки")

ddvhouse  09.04.2008  22:45 У меня в CSS, через :link и :hover меняется background при наведении. #m1:link, #m1:visited {background:url(../images/bl.gif) 0 0 no-repeat} #m1, #m1:hover {background:url(../images/bl-u.gif) 0 0 no-repeat} Нужно, что б после выполнения яваскприпта, картинки поменялись на br и br-u соответственно.

ALX  12.05.2008  20:50 Говно опера. Работает, конечно, везде, но Опера как-то странно реагирует на то, если в картинке есть прозрачность заведомо. Ну а вообще IE - просто это Г... не хочет соблюдать W3C рекомендации.

ALX  13.05.2008  17:18 после ночного штурма, я нашел решение самостоятельно. Опера не понимает gif прозрачности, но корректно работает с прозрачностью в png. Описываем стили для opera, safari а в файле xxx_opera.css меняем картинки (У меня каритнки для фона (темы оформления) были, поэтому все меняется через css).

ALX  13.05.2008  17:21 <link rel="stylesheet" href="xxx_opera.css" type="opera/css" /> Это вверху файл исчез, как тег )) _______ ну вот где удобный UI? моглиб теги и не обрабатывать или предупреждать вначале.

Lilit  20.08.2008  19:48 Подскажите пожалуйста, как сделать, чтобы картинки сами менялись с заданным периодом. Т.е чтобы после загрузки странички постоянно менялись например 5 картинок . большое спасибо )

lexa  21.08.2008  02:18 завтра постараюсь ответить на этот вопрос, сейчас сплю... )

Lilit  21.08.2008  16:53 ok ) Жду с нетерпением ) Спасибо

lexa  21.08.2008  19:27 кинул на форум рабочий пример, смотри...

Маська  27.08.2008  00:48 Спасибки, Вы подарили мне самый лучший подарок на день рожденья!!!!!! ^_^ )))

Lilit  08.09.2008  05:21 уси пуси ^_^

Lilit  08.09.2008  05:23 Т.е, большое спасибо ) за спасение для неграмотных

Alazaur  22.10.2008  04:12 Добавил в избранное)) Завтра буду пробовать... и почему такие вещи всегда в четыре часа ночи находятся=))

lexa  22.10.2008  07:40 найди статью по новее, это старая статья, работающая только под IE

Alazaur  23.10.2008  02:44 Эта и есть новая, работающая под всеми браузерами))) Lexa, пора тебе в отпуск, раз сам в своих статьях путаться начал :)

lexa  23.10.2008  11:33 ааа сорри, это я чуваку одному на другой статье отписывался, и че то сюда запостил ))

Uly   31.10.2008  07:20 Хочу посоветоваться, возможно ли создать эффект плавного перехода для фона ячейки таблицы. Изменить прозрачность фона ячейки могу, а сообразить как в этой же ячейке должна появиться другая картинка пока не получается. Спасите от разрыва мозга!

lexa  31.10.2008  12:43 можно конечно, заинтересовал :) попробую на днях, на форуме выложу что получилось

Cas  26.11.2008  23:22 2>Uly смена содержимого контейнерного тэга возможна при обращении к свойству innerHTML этого элемента - гугли

lexa  27.11.2008  12:48 он другое имеет в виду насколько я понял, он имеет в виду плавная смена фона картинки, а не содержимого...

* Ник:
E-mail:
Сайт:
* Комментарий:
* Введите число:	692