по материалам MSDN Labrary 2000
материал действителен для версий Internet Explorer 4 и выше
для просмотра примеров использовать браузер Internet Explorer :)
Эта статья была написана в 2000 году и актуальна только для браузеров версий IE4 – IE8.
С выпуском браузера Internet Explorer версии 4.0 Microsoft позволила Web дизайнерам применять различного рода эффекты, которые разработчики браузера называют мультимедийными (multimedia). Они делятся на две достаточно разнородных группы: фильтры (filters)и превращения (transitions). Эти эффекты применяются к Web странице и ее элементам, используя атрибуты каскадных листов стилей (CSS). Визуальные фильтры и превращения могут применяться к стандартным HTML элементам, типа текстовых контейнеров, изображений и любому другому неоконному (windowless) объекту. Превращения – изменяющиеся во времени фильтры, которые могут создавать переход от одного визуального состояния к другому. Объединяя фильтры и превращения небольшими сценариями, можно получить мощный инструмент для создания визуально привлекательных и интерактивных документов.
Визуальные фильтры - это расширения Internet Explorer, которые создают экранные эффекты в элементах HTML документа. Хотя некоторые фильтры и можно заменить сценариями и соответсвующими графическими изображениями, они имеют несколько преимуществ. Во-первых, не все разработчики владеют скриптовыми языками; во-вторых они как правило значительно компактнее по величине кода и быстрее по выполнению (особенно в тех случаях, когда для их эмулирования используется графика).
Фильтры изменяют вид элемента. Фактически, они могут полностью заменить визуальное отображение элемента при применении к ним эффекта. Хороший пример визуального фильтра – Alpha фильтр. Он смешивает элемент с фоном. Дизайнер определяет степень смешивания (или непрозрачности). Например, следующий HTML код заставляет изображение быть на 20 % непрозрачным:
<IMG SRC="images/hp_logo.gif" STYLE="filter:alpha(opacity=20)">
Фильтры применяются к элементам HTML через свойства каскадных листов стилей. Свойство filter - это строка описаний фильтра (как, впрочем, и превращений), который использует function-подобную запись. Синтаксис свойства filter в атрибуте STYLE таков:
filter:filtername(параметры)
Например, вот как записываются фильтры через атрибут STYLE тэга IMG.
<IMG ID=sample SRC="images/hp_logo.gif" STYLE="filter:blur(strength=50) flipV()">
hp_logo.gif |
hp_logo.gif с фильтрами |
В этом примере к элементу IMG применяются два фильтра . Первый фильтр смазывает изображение (blur, эффект движения) с определенной интенсивностью (strength). Второй фильтр вертикально отражает (flipV) изображение (В моем браузере flipV отображает горизонтально, а flipH – вертикально!? А в Вашем?).
Каждый фильтр может иметь набор необязательных параметров, чтобы определить точный характер эффекта (например, цвет или продолжительность). Некоторые фильтры, например, FlipV и FlipH, могут не иметь параметров (хотя все фильтры и переходы имеют свойство enabled, и все превращения имеют свойство Duration). Можно применять несколько фильтров так, как в вышеупомянутом примере FlipV и Blur фильтры применяются в комбинации к IMG.
Визуальные фильтры могут применяться только к HTML элементам, которые являются элементами управления (controls; далее по тексту, просто элемент). Элемент управления определяет прямоугольное пространство внутри окна браузера, когда окно просмотра прорисовывает Web документ. Элементы управления не могут быть оконными (windowed), типа IFRAME. Эти элементы управления HTML таковы:
К неоконным (windowless) элементам управления, типа структурированной графики (structured graphics) и элементов управления ActiveX (ActiveX™ Controls), можно также применять filter атрибуты. Фильтры следуют стандартной схеме наследования CSS атрибутов (если она существует для объекта), кроме исключений, отмеченных ниже.
Фильтры игнорируются для любых позиционируемых элементов, вложенных внутри непозиционируемых, типа позиционируемого SPAN внутри непозиционируемого DIV. Самое простое решение: всегда устанавливать или определять ширину для вашего самого нижнего (outermost) элемента.
К элементам и объектам-окнам (windowed), к которым не могут применяться фильтры, относятся апплеты Java, IFRAME, элементы форм (SELECT и OPTION), элементы параграфа (P), заголовки (Hn), и логические текстовые элементы стиля (EM и STRONG).
Для каждого элемента доступна коллекция filters, так что сценарий имеет доступ к отдельным фильтрам элемента. К коллекции фильтров можно обращаться, как и к любой другой коллекции объектной модели. Например, следующая строка сценария адресует первый фильтр в коллекции фильтров элемента с id=theDiv.
theDiv.filters.item(0).enabled = true;
Подобно другим коллекциям объектной модели, коллекция filters поддерживает несколько видов доступа.
<IMG id=sample SRC="sample.jpg"
STYLE="filter: alpha(opacity=50) fliph(enabled=0) blur(amount=10);
position: relative">
<SCRIPT LANGUAGE="JavaScript">
sample.filters.alpha // подобъект
sample.filters["alpha"] // именованный индекс
sample.filters[0] // числовой индекс (filters как массив)
sample.filters.item(0) // числовой индекс (filters как объект)
</SCRIPT>
Доступ с помощью числового индекса полезен, когда применяется больше чем один фильтр одного типа или когда тип фильтра не известен заранее (например, если он установливается через сценарий или связывание данных). Это особенно важно для фильтров и превращений, которые имеют общие свойства и методы, типа color и play.
Фильтры можно рассматривать как подобъекты элементов, к которым они применяются. Подобно другим объектам, они предоставляют свойства и методы для изменения их внутреннего состояния. В следующем примере непрозрачность элемента динамически изменена изменением свойства opacity в Alpha фильтре.
<img id=sample src=sample.jpg style="filter: alpha(opacity=50)">
<script language="javascript">
function foo(){
sample.filters.alpha.opacity += 10;
}
</script>
Объект-свойство элемента style также имеет свойство filter. Это - строка для чтения/записи, которая может использоваться, чтобы управлять CSS фильтрами элемента непосредственно. Например, при использовании DIV, определенного ниже, следующий код:
<div id=mydiv style="height:50; width:50; filter:wave(strength=100)
revealTrans(transition=3 duration=4)"> This is a div </div>
<script>
...
alert(mydiv.style.filter)
...
</script>
вызвыл бы функцию alert со следующей строкой:
wave(strength=100) revealTrans(transition=3 duration=4)
Запись в это свойство особенно полезна для смены фильтра элемента динамически. Обратите внимание, что запись в это свойство переписывает существующее значение и браузер перерисовывает новую строку немедленно. Следующий пример добавляет фильтр FlipH к коллекции на лету.
<DIV ID="mydiv" STYLE="height:50; width:50; filter:wave(strength=100)
revealTrans(transition=3 duration=4)"> This is a div </DIV>
<SCRIPT>
...
mydiv.style.filter += " fliph()"
...
</SCRIPT>
После изменения, новая строка фильтра теперь выглядела бы следующим образом:
wave(strength=100) revealTrans(transition=3 duration=4) fliph()
Любые следующие изменения строки фильтра будут менять уже эту новую строку.
Примечание. Как уже отмечалось, изменение фильтров возможно также через объектную модель, т.е. через обращения к их методам и свойствам. Для улучшения эффективности, настоятельно рекомендуется, чтобы Вы обращались к CSS фильтрам через объектную модель всякий раз, когда это возможно, и только тогда обращались к строке фильтра, когда объектные возможности модели не адекватны. Даже в случае динамического добавления фильтров рекомендуется в большинстве случаев добавить фильтр в начальных атрибутах фильтра листа стилей со свойством enabled установленным в "false". Когда необходимо, чтобы фильтр был применен к элементу, нужно просто установить из сценария enabled=true для данного фильтра. (Заметьте, что в атрибутах стиля filter необходимо использовать кавычки для true/false, в то время как в сценарии кавычки употреблять не надо. Чтобы не запутаться с кавычками, можно применять числовые значения для enabled без кавычек (false=0, true=1).) Пример в листинге ниже показывает, как изменить фильтр из сценария, изменяя свойство enabled фильтров.
...
<IMG id=sample SRC="sample.gif" STYLE="filter: xray(ENABLED=0)
flipH(ENABLED=0) flipV(ENABLED=0)
alpha(opacity=50, ENABLED=0) blur(amount=10, ENABLED=0)
chroma(color=black, ENABLED=0) dropShadow(color=gray, ENABLED=0)
glow(strength=10, color=gray,ENABLED=0)
gray(ENABLED=0) invert(ENABLED=0) light(ENABLED=0)
mask(color=blue,ENABLED=0) shadow(color=gray, ENABLED=0)
wave(strength=8, freq=3, lightstrength=20, add=0, phase=90, ENABLED=0);">
<br>
<input type=button value="next filter" onclick="next(1)">
<input type=button value="prev filter" onclick="next(-1)">
<SCRIPT LANGUAGE="JavaScript">
var cf=0;
function next(dir)
{
sample.filters[cf].enabled=false; // или sample.filters[cf].enabled=0;
cf+=dir;
if (cf>=sample.filters.length) cf=0;
if (cf<0) cf=sample.filters.length-1;
sample.filters[cf].enabled=true; // или sample.filters[cf].enabled=1;
}
</SCRIPT>
...
(см. как это работает)
Ниже приведены некоторые особенности, которые надо учитывать при применении фильтров.