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

GG   23.12.2008  01:13 Красиво, возьмём на вооружение :)

ДР  16.01.2009  00:47 lexa - 28.05.2007- "IE поддерживает наибольшее количество стандартов из числа всех браузеров." Только что то ACID проходит хуже всех...

lexa  16.01.2009  02:00 я имел в виду, что IE поддерживает кучу своих дополнительных свойств. которые не доступны в других браузерах, а это не правильно. Одно обращение через getElementById к элементу без ID чего стоит...

hghsd  05.02.2009  20:15 Спасибо, у Вас очень хороший скрипт. Только вот вкралась ошибочка. Первый тег не закрыт. Вместо еще один . А вообще, спасибо!

hghsd  05.02.2009  20:16 Я имела в виду, первый div не закрыт

lexa   05.02.2009  20:27 спасибо, поправил

hghsd  06.02.2009  14:41 А не подскажете, какая разница - делать слайдшоу в javascript или flash? Мне нужно с плавными переходами, чтобы файл немного весил (слайдов будет 50), желательно, чтобы они просто лежали в своей папке, а загружались только при необходимости. И чтобы переход происходил автоматически каждые 5 сек. Я только начинаю разбираться в javascript и flash. Что мне выбрать?

hghsd  06.02.2009  14:48 Да, и чтобы выбор изображения был случайным

lexa  06.02.2009  19:24 Разница такая, если у человека не будет установлен flash, слайдшоу никто не увидит. Смотри такой пример http://www.art.webobzor.net/art/131.php

lexa  06.02.2009  19:24 а вообще стукнись в асю, если не разберешся

hghsd  07.02.2009  23:18 Спасибо!

hghsd  09.02.2009  10:45 Я попыталась сделать скрипт, но он не работает. Может, ты мне поможешь? Только куда его прислать?

lexa  09.02.2009  11:10 в асю стукнись

lexa  09.02.2009  11:11 292-994-202

LESH    05.03.2009  16:15 спасибо, оч. помогло. флэш вообще терпеть не могу - не у всех он включен. IE слишком дырявый. у меня этот скрипт работает в опере ff и ie. кстати у меня на сайте посетителей IE не 80 и не 70% кому интересно TOP 10 брузеров на моем сайте 1. IEnternet Explorer 4,012 39.18% 2. Opera 3,285 32.08% 3. Firefox 2,580 25.20% 4. Safari 190 1.86% 5. Chrome 151 1.47% 6. Mozilla 14 0.14% 7. HTC_P3700 Opera 2 0.02% 8. (not set) 1 0.01% 9. LG-KF510 Obigo 1 0.01% 10. HTC_Touch_Pro_T7272 Opera 1 0.01% IE распределяется так 1. 7.0 2,273 56.66% 2. 6.0 1,699 42.35% 3. 8.0 28 0.70% 4. 5.5 8 0.20%

Lex Nevermind    26.04.2009  16:08 Жутко долго в ИЕ работает :(

lexa  27.04.2009  13:32 замечательно и в FF и в IE работает

lexa  27.04.2009  13:33 а если ты про скорость смены картинки, то можно же побыстрей выставить, а лучше всего просто определять, что за браузер и менять скорость

Zmeev    21.06.2009  21:32 Здравствуйте! Скипт отличный, у меня по всех браузерах работает отлично! Подскажите, пожалуйста, как его модифицировать, чтобы при mouseout возвращалась прежняя картинка и чтобы при следующем наведении эффект повторялся. Я в яве - ноль, поэтому у меня только первую часть получилось реализовать )

lexa   26.06.2009  21:32 Создай тему на форуме, покажу код

cialis   16.07.2009  16:40 Great topic. Now i can say thank you

soundtracks   17.07.2009  15:11 +1

javagame   17.07.2009  20:29 Very goood!!!

pharmacy   02.08.2009  20:12 Very goood!!!

pills   03.08.2009  21:32 Nice work

buypills   07.08.2009  00:09 Nice blog! Very interesting themes

znakomstva   11.08.2009  18:09 e-mailed on rss

PrettyGirll   12.10.2009  09:47 Приветствую всех на прекрасном форуме У меня возникла ужасная проблема,это просто не выносимо. Мой возлюбленный тратит все свободное время в интернете на двух сайтах(они популярны)... Гулять почти не выходит, только до работы.) НО я его люблю и не хочу его потерять!!! И незнаю что сделать для него. К психологу уже обращались - помогло на первое время Извините если запостила не в том разделе. Помогите пожалуйста!

GenaLoll   16.10.2009  21:22 Купил себе Q5 в новом кузове, максимальная комплектация. Стильный автомобиль, нареканий нет. А что вы предпочитаете? Проверенные временем модели автомобилей или инноваионные?

Gip[s_0]n   16.10.2009  23:20 а как сделать, чтоб div, в который загнаны разные обьекты, менялся на другой div с обьектами, через определённое время автоматически (цикл постоянно повторяется)? и чтоб был именно с эффектом плавной смены) пожалуйста помогите)

thudgewague   06.11.2009  13:14 Интересно написано, я пробовал подобное делать ничего не вышло

crealpaciex   07.11.2009  09:28 Отличный сайт и материалы очень познавательные

BoDyaWeb  06.12.2009  00:40 Ну теперь хоть разобрался с плавной сменой картинки. Во всех браузерах работает. Спс!!!

Надежда    05.03.2010  20:46 Спасибо, отличный эффект! От такого не устают глаза у пользователей и очень хорошо оживляет страничку, попробую.

Jacik    16.03.2010  08:22 Интересное решение, но, не полностью кроссбраузерное. IE плохо просчитывает скорость появления второго изображения.

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