Графические фильтры в HTML. Часть первая

Автор: manager Суббота, Март 22nd, 2008 Нет комментариев

Рубрика: Интернет

Появление за последние годы в глобальной сети множества новых сайтов обусловило сильное развитие HTML. Это уже далеко не тот ограниченный язык, который разрабатывался под первые броузеры.

Возможность использовать графические фильтры появилась в нем давно, только была она не совсем такая, какой мы ее можем лицезреть в современных броузерах. Первоначально эти фильтры создавались на основе элементов ActiveX и вызывались довольно трудоемким способом через тэг с указанием многозначного идентификатора в параметре classid- выглядело это примерно так: classid=»clsid:D27CDB6E-AE6D -11cf-96B8-444553540000″, причем для каждого фильтра параметр был свой. Однако вскоре положение резко изменилось. Основной скачок произошел во время создания обозревателей Microsoft Internet Explorer 4.0. Именно тогда впервые началось использование так называемых css-таблиц или каскадных таблиц стилей — то есть, появилась возможность переопределять способы отображения информации для стандартных тэгов. Тогда же появились и первые графические фильтры, встроенные непосредственно в HTML. Изначально это были всего лишь переопределения для тэга «img» (изображение), но уже в броузерах семейства Microsoft Internet Explorer 5.x появилась возможность использовать их практически для любого элемента оформления Web-страницы.

Непосредственно графический фильтр — это программа, выполняющая какое-то нехудожественное преобразование изображения. Нехудожественное потому, что делается только с использованием принципов кодирования самой картинки, а не того, что на ней нарисовано, например просто берет и меняет цвета всех пикселей изображения на противоположные (invert), либо переворачивает его по вертикали (flipv), либо еще что-нибудь…

Может возникнуть резонный вопрос: зачем встраивать в броузер возможности редактирования изображения, если можно это сделать в каком-нибуть photoshop’е, а потом просто замостить рисунок? Сделано это по нескольким причинам. Во-первых, скорость загрузки — если, допустим, у вас на странице существует несколько изображений одинакового содержания, отличающихся только тем, что прогнали их через разные фильтры, мы можем загружать не все картинки, а только одну, первоначально использованную для создания других, после чего редактировать отображение в самом броузере. Во-вторых, возможность выполнять графическое преобразование в течение некоторого времени, что позволяет увидеть этот процесс «в динамике». Последнее делается двумя способами: с помощью собственно динамических фильтров, которые мы рассмотрим в другой раз, а также при помощи переопределения стандартных фильтров на языке Javascript.

Графические фильтры бывают двух видов: статические и динамические. Любой статический графический фильтр выполняет мгновенное преобразование элемента Web-страницы, к которому применяется. Динамические фильтры, как уже отмечалось, позволяют отображать не какое-то преобразование, а целый процесс. Чаще всего при разработке Web-страниц используются статические фильтры, так как динамические графические фильтры поддерживаются далеко не всеми версиями обозревателей Microsoft Internet Explorer.

Статические графические фильтры

Непосредственный доступ к статическим фильтрам производится двумя способами: через объявление в css-таблицах, либо через Javascript-объекты. Следующий пример кода демонстрирует первый способ:

.xr {
FILTER: Xray
}

Результатом работы данного кода станет отображение рисунка exemple.gif (рис.1.a) таким образом, будто он сделан с помощью рентгеновского аппарата (рис.1.b). Программа работает следующим образом… В заголовке документа () в css-таблице мы определяем стилевой класс xr, в содержании которого всего одна строка FILTER: Xray, которая, собственно говоря, объявляет сам фильтр рентгеновского эффекта xray. Далее, в самом документе изображение exemple.gif подводится под класс xr. Важно отметить, что в классе xr может находиться объявлений столько, сколько угодно, таким образом, появляется возможность применять к одному изображению несколько графических фильтров, так, например, если бы класс xr выглядел следующим образом:

.xr {
FILTER: Flipv;
FILTER: Xray
}

то изображение exemple.gif подверглось бы не только вышеописанным изменениям, но и было бы перевернуто вверх ногами, в результате применения соответствующего фильтра Flipv. Как можно догадаться, синтаксис статического фильтра в css выглядит следующим образом: filter: имя_фильтра (параметр1=значение, параметр2=значение,…). Насчет параметров, в скобках, могу сказать, что применяются они в фильтрах, которые мы будем рассматривать далее. В фильтрах же Flipv и Xray никаких параметров нет. Так что пугаться новой сложной записи, сейчас, по крайней мере, преждевременно… Однако в дальнейшем я предоставлю вам массу возможностей, для того чтобы обиженно закинуть журнал в дальний угол комнаты с криками «я тут вообще ничего не понимаю»…

Данные преобразования можно было бы сделать и без участия css-таблиц с использованием Javascript. Следующий пример демонстрирует второй способ доступа к статическим графическим фильтрам в HTML:

Пример этот выглядит уже посложнее предыдущего, однако изложенный в нем подход дает гораздо большие возможности форматирования HTML-документа. В заголовке документа между тэгами определяется Javascript-функция, внутри которой происходит объявление фильтра xray и его привязка к изображению с идентификатором image_1. Непосредственная активизация фильтра происходит при помощи свойства filter объекта style, принадлежащего каждому объекту, содержащему графическое изображение. В теле тэга происходит непосредственный вызов функции change(), при помощи события onLoad (выполняющего какие-то действия после загрузки страницы). Теперь непосредственно рассмотрим, как вызывается фильтр в этом примере. Javascript — язык хоть и убогий, но все же объектно-ориентированный, поэтому чтобы обратиться к какому-либо действию, нужно сначала обращаться к объекту, который это действие содержит. Поэтому первым делом мы обращаемся к объекту document , который символизирует саму web-страницу. Далее мы обращаемся к коллекции all, дающей нам доступ ко всем следующим объектам в иерархии, — ссылкам, блокам текста, изображениям и т.д. Далее мы конкретно обозначаем идентификатор того объекта, к которому будет применено действие. Javascript-интерпретатор автоматически определяет, что данный объект является изображением и, соответственно, получает от класса image свойство filter, которое мы и переопределяем на xray. Преимуществ у такого подхода несколько. Во-первых, фильтрацию изображения теперь можно проводить не только при загрузке, но и в ответ на какие-то действия пользователя, например если убрать из тэга событие onLoad и изменить тэг картинки следующим образом , то выше-описанные изменения будут происходить с изображением при наведении на него курсора мыши. Другим преимуществом является создание автономного динамического изменения картинки, пример которого будет рассмотрен далее (1967).

Css-таблицы

Поимите меня правильно, я совершенно не намерен давать вам исчерпывающую информацию об использовании css. Статья, как вы уже, наверное, догадались, совершенно не об этом. Но для того, чтобы вы могли понимать в дальнейшем некоторые примеры, на на мой взгляд, следует объяснить хотя бы элементы синтаксиса, общие для всех объявлений. Вообще css — это, грубо говоря, возможность переопределять результаты, выводимые на экран определенными тэгами html. Например, для текстового тэга

можно определить следущие правила вывода:

h5{color: #ff0000; font-size: 12px; font-weight: italic}. Таким образом, тэг выведет на экран текст красного цвета, размером в 12 пикселей и написанный италическим шрифтом. Вызывать css-таблицы в броузерах семейства Microsoft Internet Explorer можно двумя способами: 1) размещать объявления между тэгами . Ставят их обычно в заголовок документа (все между тэгами ) для того, чтобы не было проблем, при которых элемент в документе применяется раньше, чем его определение в css-таблицах, хотя, в принципе, размещать их можно где угодно, строка type=»text/css» в IE не обязательна, и ее можно опускать, записывая просто ; 2) размещать объявления непосредственно в модифицируемом тэге с помощью параметра style, присущего всем элементам вэб-содержимого. Тогда описанный выше пример выглядел бы следующим образом:

Какой-то текст

. Третий способ основан на применении языка Javascript и состоит в применении каких-либо свойств к заранее проидентифицированным тэгам. Идентификация в этом случае идет с помощью параметра id, с которым мы уже знакомы. Как и style, он тоже присущ всем элементам оформления вэб-страницы. Также в последние версии IE из Netscape Navigator перекочевала возможность переопределять непосредственно тэги объявлениями следущего вида: (~2000)

h1.style.color=»#ff0000″;

Конкретно в данном примере тексту, выводимому тэгом h1, присваивается красное значение цвета. Для справки, в Netscape Navigator подобные определения пишутся не между тэгеми , а между . Последний тэг присущ только NN, и в Microsoft Internet Explorer отсутствует. Привел я его лишь для того, чтобы показать, зачем нужна вообще строка type= в тэге . Пока, что это единственные типы объявления стилей в интернете, но в ближайшее время с полной уверенностью можно предсказать появление новых подобных структур…(~8200)

Список статических графических фильтров

Использование статических графических фильтров непосредственно из css не должно, в общем-то, вызывать каких-то затруднений. Единственная проблема — названия и параметры фильтрации. Поэтому приведу список всех синтаксических объявлений для css, которые существовали на момент написания этой статьи…

Прозрачность

Эффект прозрачности должен быть знаком каждому, кто когда-либо хоть немного занимался web-дизайном. Скажу без преувеличения, практически нет такого сайта в Интернете, при создании которого в том или ином виде не использовалось бы изменение прозрачности отдельных изображений. Другой вопрос, что через html делают это очень немногие ввиду различности интерпретаторов на броузерах разных фирм, куда чаще используют какие-нибудь графические редакторы типа Fireworks или Photoshop, или еще что-нибудь. Синтаксис фильтра выглядит следующим образом. STYLE=»filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=X, StartY=Y, FinishX=X, FinishY=Y)»

Opacity — уровень прозрачности, 0-100, где 0 — прозрачно, 100 — непрозрачно

FinishOpacity — конечный уровень прозрачности, 0-100, где 0 — прозрачно, 100 — непрозрачно

Style — принимает значения 0 (uniform), 1 (линия), 2 (круг) or 3 (прямоугольник)

StartX — координатаX начала градиента

StartY — координата Y начала градиента

FinishX — координата X конца градиента

FinishY — координата Y конца градиента

Конечно, имеются в виду координаты на плоскости rgb, а не на поле документа.

Размытость

Для тех, кто не знает, что это такое, советую обратить внимание на рис.1, где именно таким образом написано слово «читаемый». Для всех остальных привожу синтаксис вызова данного графического фильтра.

STYLE=»filter:Blur(Add = add, Direction = direction, Strength = strength)»

Add — Или 0, или 1. Логический параметр, указывающий, следует ли добавлять более слабые копии изображения в итоговый результат и создавать таким образом иллюзию движущегося элемента.

Direction — От 0 до 315 — в какую сторону произойдет размытие.

Strength — Смещение изображения относительно оригинала.

Задание прозрачности для какого-либо цвета в изображении

Фильтр хорошо применять к изображениям, созданным в формате gif либо png. Для jpeg’а он обычно не дает хороших результатов, ввиду того, что для данного формата трудно определить границы заливки отдельных цветов. Синтаксис фильтра:

STYLE=»filter:Chroma(Color = color)»

Color — цвет(#ff0000)

Создание четкой тени объекта

Графический фильтр с наименованием «dropshadow» позволяет создавать тень у элемента путем добавления его силуэта, смещенного в определенном направлении. Синтаксис вызова:

STYLE=»filter:DropShadow(Color=color, OffX=Offx, OffY=Offx, Positive=positive)»

Color — Цвет тени(#ff0000)

OffX — Смещение тени относительно исходного элемента по горизонтали

OffY — Смещение тени относительно исходного элемента по вертикали

Positive — Логический параметр, может принимать значения 1 и 0. В первом случае (который поставлен, по умолчанию, в случае отсутствия параметра) тень будет отображаться в стандартном виде. Иначе тень инвертируется, и ее фон будет отображаться цветом, заданным с помощью параметра color, а само теневое изображение элемента будет отображаться цветом фона.

Горизотальный переворот

Фильтр с названием «flipH» задает горизонтальное отражение элемента. Синтаксис:

STYLE=»filter:FlipH»

На момент написания этой статьи фильтр никаких параметров не имел.

Вертикальный переворот

Фильтр, отражающий содержимое элемента по вертикали, носит наименование «flipV».

STYLE=»filter:FlipV»

Как и в случае с FlipH, для данного фильтра в последней версии броузера Microsoft Internet Explorer 6 параметров не определено.

Сияние

Фильтр с названием «glow» создает эффект сияния объекта, путем создания вокруг него размазанного контура, повторяющего контур самого объекта. Синтаксис вызова:

STYLE=»filter:Glow(Strength=strength, Color=color;)»

color — цвет, которым будет создаваться дополнительный контур элемента.

strength — задает размер этого нового контура и, косвенно, его размытость, грубо говоря, это сила, с которой засияет объект. Пре-дельные значения: 0-100 у.е. (это не доллары).

Представление рисунка в черно-белых цветах

Фильтр Gray делает рисунок черно-белым, может применяться только к объектам типа (изображениям). Действует на все форматы графических файлов, поддерживаемых в Windows. Синтаксис вызова фильтра:

STYLE=»filter:Gray»

На момент написания этой статьи фильтр никаких параметров не имел.

Инвертирование изображения

Фильтр Invert реверсирует оттенок, насыщенность и яркость объекта. Применяется только к изображениям. Поддерживает все Wind’овские форматы графических файлов.

Синтаксис:

STYLE=»filter:Invert»

На момент написания этой статьи фильтр никаких параметров не имел.

Выделение объекта

Фильтр «mask» делает так называемую маску: фон объекта переводится в специально заданный разработчиком цвет, а основной план объекта переводится в белый цвет. Может применяться только к элементам текстового оформления (

,
,

и.т.д).

Синтаксис:

STYLE=»filter:Mask(Color=color)»

color — цвет выделения. Значением этого параметра может быть любое обозначение цвета, принятого в html.

Создание обыкновенной тени от объекта

Фильтр Shadow делает объекту тень.

Синтаксис:

STYLE=»filter:Shadow(Color=color, Direction=direction)»

color — цвет тени.

Direction — (от 0 до 315)направление тени относительно осей координат поля документа.

Волнистость

Статический графический фильтр с наименованием «wave» накладывает на объект волнообразное преобразование. Применяется только для текстовых тэгов.

Freq — число волн в результируемом изображении. Чем больше значение этого параметра, тем более «волнистым» окажется результат.

Add — логический параметр. Если мы укажем для него ненулевое значение, то вместе с результатом действия графического фильтра будет отображен и исходный элемент. Этот вариант выглядит слишком громоздко, поэтому обычно используют нулевое значение этого параметра, либо не указывают его вообще.

LightStrength — сила волны

Phase — угол волны

Strength — вертикальный размер волны

Рентгеновский эффект

Фильтр Xray воздействует на объект как Х-луч — черно-белый негатив.

Синтаксис:

STYLE=»filter:Xray»

В Microsoft Internet Explorer 6 для данного фильтра параметров нет.

Освещение

Пожалуй, самый интересный и самый мощный статический графический фильтр из существующих на сегодняшний день, рассмотрение свойств которого я оставил напоследок. Фильтр носит наименование «LIGHT». Он позволяет создавать эффекты освещения элемента различными источниками света. Фильтр крайне необычен, уже потому, например, что вызвать его возможно только через javascript. В наличии у него существует несколько методов, которые изменяют количество источников света и различные параметры светимости, методы эти во время фильтрации передаются проидентифицированному объекту и синтаксис обращения к ним соответственно выглядит следующим образом: идентификатор_объекта . style . filters . название_метода (параметры_метода);. На момент написания этой статьи в Internet Explorer 6 данный фильтр имел следующий набор методов:

AddAmbient (R,G,B,strength)

Добавляет окружающий световой источник к изображению. Окружающий свет не-направлен и освещает всю область. Солнце испускает окружающий свет. Синтаксис:

object.style.filters.Light(n).addAmbient(R,G,B,strength)

Где R , G и B — значения (0-255), чтобы определить цвет окружающего света, и strength определяет «количество» света.

AddCone (x1,y1,z1,x2,y2,R,G,B, strength,spread)

Добавляет к изображению, источник освещения в виде конуса. Свет направленный и освещает только определенную область. Синтаксис:

object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2, R,G,B,strength,spread)

Где x1, y1 — значения, определяющие положение источника света, x2 и y2 — определяют координаты, куда направлен свет, R , G и B — значения (0-255), чтобы определить цвет света; strength определяет «количество» света; и spread определяет угол распространения (0-90, в градусах).

AddPoint (x,y,z,R,G,B,strength)

Добавляет к изображению точечный источник освещения.Точечный источник освещения — лампочка. Синтаксис:

object.style.filters.Light(n).addPoint (x,y,z,R,G,B,strength)

Где x , y и z — координаты точечного источника освещения…

остальные параметры, как у других методов.

ChangeColor (lightnumber, r,g,b, fAbsolute)

Метод ChangeColor изменит цвет светового фильтра, примененного к объекту. Используйте lightnumber, чтобы определить световой источник, чей цвет должен быть изменен (это — позиция в массиве Lights), r,g и b, новый цвет; fAbsoloute может принимать значение true (nonzero) и false (т.е. zero), на что это влияет — посмотрите сами…

ChangeStrength (lightnumber, strength, fAbsolute)

Метод ChangeStrength изменяет силу определенного светового фильтра (который определяется аргументом lightnumber) на силу, определенную в параметре strength …

Clear

Метод Clear удаляет все источники света для определенного светового фильтра.

MoveLight (lightnumber, x, y, z, fAbsolute)

Метод MoveLight передвигает источник света (в случае AddPoint), место освещения (в случае AddCone). x , y и z — значения, определяющие положения передвижения света, или абсолютно ( fAbsoloute=nonzero ), или относительно ( fAbsolute=false ).

Совместимость в различных броузерах

Скажу сразу, что все здесь предназначено, по крайней мере, на сегодняшний день, исключительно тем, кто пользуется обозревателями семейства Internet Explorer, фанатам Netscape Navigator, к сожалению (или к счастью) уже никогда не придется просмотреть в своих броузерах страницы, сделанные с применением графических html-фильтров, так как последняя его версия эту технологию не поддерживает, а как известно, корпорация Netscape прекратила выпуск своих навигаторов и, соответственно, ничего нового там уже быть не может, хотя жаль, ведь действительно был хороший обозреватель. Насчет Opera могу отметить, что в нем пока нет поддержки графических фильтров, да, скорей всего, и не будет. Броузер этот рассчитан исключительно на людей, занимающихся в Интернете поиском полезной информации, либо на тех, кто очень любит сидеть в чате. Преимущество Opera — скорость и простота настройки, а никак не наличие встроенных функций для изменения отображаемых объектов. Хотя это мое субъективное мнение, и, возможно, создатели самого скоростного обозревателя сочтут необходимым включить в свой html-интерпретатор поддержку графических фильтров…

Статические графические фильтры и Javascript

В самом начале статьи отмечалось наличие двух основных способов доступа к статическим графическим фильтрам в html. Это доступ через css-таблицы и через объявления с использованием javascript-функций. И как уже было сказано, второй способ дает нам в руки гораздо большие возможности для создания действительно красивых сайтов. Это и понятно, ведь html — это всего лишь язык разметки для текста, который передается через Интернет, в общем-то, не дающий никакого простора для творчества. Мы можем использовать только какие-то зарезервированные, порядком надоевшие возможности стандартных тэгов, перетекающих с одной страницы на другую. Javascript же, при всех его недостатках, — почти полноценный язык программирования, даже с некоторым намеком на использование объектно-ориентированной модели, позволяющий дизайнеру почти полностью отойти от стандартных и очень распространенных шаблонов. И самой интересной возможностью этого почти объектно-ориентированного языка на сегодняшний день является способность динамического переопределения css-значений не только для отдельных тэгов, но и для целых документов. Сейчас эта возможность уже официально считается преемником старого доброго html и носит название Dinamic HTML(DHTML). Начало этой технологии по-ложил броузер Microsoft Internet Explorer 4.0, который, помимо всех остальных новинок, содержал и первые статические графические фильтры. И для них уже тогда существовала возможность доступа через Javascript, однако доступ этот был, по большому счету, всего лишь более громоздким аналогом css-объявлений, потому что графические фильтры были частью только лишь самого html-документа, не являясь при этом полнокровными объектами языка программирования Javascript. Соответственно, не было совершенно никакой возможности обозначать их как переменные, передавать методам и функциям в качестве параметров, динамически изменять их значения, — в общем, не было всего того, что мы привыкли считать программированием. Но все это появилось спустя некоторое время в броузерах серии Microsoft Internet Explorer 5.x. Подобные возможности поддерживаются и в последней версии этого популярного обозревателя, однако говорить о том, что данная традиция продолжится и с появлением более новых броузеров, сейчас, по крайней мере, преждевременно. Встроенные графические фильтры вообще не являются стандартом HTML 4. Это всего лишь некое отступление корпорации Microsoft от общепринятых правил, которое когда-нибудь этим правилом возможно станет, а возможно и нет. В большой степени именно этим объясняется тот факт, что на сегодняшний день применение статических графических фильтров при создании дизайна web-страниц носит крайне эпизодический характер. Но все же технология, несомненно, является одной из самых интересных за всю историю html и есть на-дежда, что, при условии сохранения этого языка как основного инструмента передачи информации через www-статические графические фильтры уже в ближайшее время станут неотъемлемой его частью…

В начале статьи я обещал рассмотреть пример совместного использования css-определений для графических фильтров и некоторых возможностей языка Javascript. Полагаю, что настало время выполнить данное обещание. И для этого мы совместно разберем пример кода, создающий эффект плавного появления определенного рисунка, при наведении на него стрелкой мыши. Эффект этот создается с помощью изменения его значений прозрачности за определенный промежуток времени и с определенной задержкой между изменениями. Посмотрим внимательно на html-код документа, реализующего всю эту фишку.

<!—
.alph {
FILTER: Alpha(Opacity="0")
}
а

<!—
function high(which2){
theobject=which2;
light_stat=setInterval("light_stat(theobject)",5)
}
function low(which2){
clearInterval(light_stat);
which2.filters.alpha.opacity=0
}
function light_stat(cur2){
if (cur2.filters.alpha.opacity

Итак, начнем сначала… В заголовке документа между тэгами мы определяем стилевой класс. Что это такое, я уже рассказывал: который вызывает статический графический фильтр alpha, отвечающий за прозрачность какого-либо объекта, и передаем ему начальное значение этой прозрачности, равное нулю,- то есть делаем так, что изображение, к которому будет применен данный фильтр, становится изначально невидимым. Далее в теле документа — все между тэгами — мы подводим само изображение под класс alph, передавая ему таким образом заданное значение прозрачности. Как уже отмечалось, это можно сделать и другим способом- непосредственно через свойство style тэга img, но в таком случае фильтр будет зарезервирован только за одним изображением, а если мы захотим, чтобы у нас плавно появлялись две и более картинки, нам придется писать все то же самое для каждой по отдельности, в этом же случае нам следует всего лишь подвести их под тот же класс. Непосредственное действо происходит между тэгами , где и содержится программа. Все остальное лишь визуальное оформление. Здесь же мы имеем три функции high, low и light_stat. Первая функция вызывает оператор setInvertal, назначение которого состоит в обращении к какой-либо функции через определенный промежуток времени, в данном случае к light_stat через каждые 5 миллисекунд. При каждом обращении этой функции передается переменная theobject, которой ранее присваивается значение идентификатора того изображения, с которым происходит взаимодействие. Сама функция light_stat всего лишь приращивает значение прозрачности для переданного в нее объекта на 5 условных единиц. Таким образом, в результате того, что high вызывает через каждые 5 миллисекунд light_stat, мы имеем постепенное наращивание прозрачности по 5 единиц за каждое обращение — соответственно, создается впечатление всплывающей картинки. Функция же low аннулирует для нее значение прозрачности и прекращает действие таймера специальной процедурой clearInterval().

Продолжение следует.

Источник: «Компьютер Price», http://www.comprice.ru

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

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты