Синтаксис фильтра достаточно прост и аналогичен правилам задания свойств элементов с помощью тега STYLE. Запись производится в следующем виде:

filter: название_фильтра(параметры)

где "параметры" определяются в стандартном для HTML виде:

название_параметра=значение_параметра

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

Общие свойства и описание некоторых фильтров
При использовании фильтров следует помнить, что некоторые из них имеют общие свойства, влияющие на характер действия заданных параметров фильтра. К таковым относятся enabled (со значениями true и false, соответственно, разрешающим или запрещающим применение присоединенного к элементу веб-документа фильтра), direction (определяет направление действия таких фильтров, как shadow, blur и др.), strength (задает интенсивность действия фильтра со значением от 0 до 255) и т.п. Часть фильтров, помимо общих свойств, имеют различные методы их задания (например, фильтр light).

Браузер MS Internet Explorer 4.х (и выше) поддерживает не такое уж большое количество фильтров, однако широкие возможности по настройке заданных параметров, свойств и методов фильтров представляют применение этой технологии в более выгодном свете.

Рассмотрим на примерах возможные варианты действия некоторых фильтров.

Фильтр wave
Фильтр WAVE создает синусоидальное искривление объекта в вертикальном направлении и имеет свойства add, enabled, freq, lightStrength, phase и strength. Свойства enabled и strength были описаны выше, а остальные имеют следующее предназначение: add определяет необходимость добавления исходного вида объекта в его отфильтрованную интерпретацию; freq задает количество максимумов в волне искривления объекта; lightStrength добавляет эффект трехмерности гребням волны искажения объекта; phase определяет фазу смещения волны (ее значение задается в процентах относительно начальной фазы, равной 0).

В Примере 1 представлено три вида объекта: (1) исходный объект без действия фильтра WAVE; (2) объект с действием фильтра WAVE и заданными свойствами strength=5, add=0, lightStrength=20; (3) объект с заданными свойствами strength=5, add=0, phase=50, lightStrength=20, freq=30. А листинг для этих трех примеров выглядит таким образом:

<img src="flower.jpg">

<img src="flower.jpg" style="filter: wave(strength=5, add=0, lightstrength=20)">

<img src="flower.jpg" style="filter: wave(strength=5, add=0, phase=50, lightstrength=20, freq=30)">

Фильтр alpha
О данном фильтре я уже упоминал в прошлом выпуске, когда рассматривал возможные способы получения эффекта MouseOver. Однако в прошлый раз речь шла только о свойстве opacity, определяющим степень прозрачности объекта. Помимо его, есть такие свойства, как style и finishOpacity. Свойство style может принимать значения от 0 до 3: нулевое значение соответствует степени прозрачности объекта согласно значению свойства opacity; style="1" задает координаты точек прямой, на которой степень прозрачности соответствует значению свойства finishOpacity; при style, равном 2, степень прозрачности изменяется от центра объекта к вымышленной окружности, спроецированной на блок отображения объекта (заданный отрезок от значения opacity до значения finishOpacity); если свойство style="3," прозрачность меняется от центра объекта к его границам. В Примере 2 представлены три примера действия фильтра ALPHA: (1) style="0," opacity=60; (2) style="3," opacity=90, finishOpacity=0; (3) style="2," opacity=90, finishOpacity=0. Кодовый листинг не привожу, т.к. он аналогичен предыдущему (изменяются только названия фильтров и свойств, а также их значений).

Фильтр dropShadow
Этот фильтр создает сплошной силуэт объекта, смещенный в заданном направлении, и образует эффект тени. Кроме enabled, имеет следующие свойства: color (определение цвета тени); positive (выбор между тенью от прозрачных или непрозрачных точек объекта), offX и offY (расстояние в пикселях в вертикальной и горизонтальной плоскостях, на котором будет отображаться тень от исходного объекта: положительные значения offX и offY смещают тень, соответственно, вправо и вниз, отрицательные - влево и вверх.

Фильтр light
Данный фильтр имеет одно-единственное свойство enabled и несколько интересных методов, позволяющих варьировать способы освещения выбранного объекта. Метод addAmbient помещает над объектом источник рассеянного света и требует задания значений по шкале RGB и степени интенсивности наложения iStrength (от 0 до 255); метод addCone направляет на объект конический источник света и имеет следующие значения: координаты источника света iX1 и iY1, номер слоя iZ, координаты точки направления света iX2 и iY2, цветовая гамма по шкале RGB (iRed, iGreen, iBlue), интенсивность источника света iStrength и величина угла конуса источника света iAngle; метод addPoint имеет те же значения, что и addCone, кроме iX2 и iY2, и добавляет к объекту точечный источник света. Это наиболее популярные методы, демонстрацию двух первых из которых можно увидеть в Примере 3.

Код для этого примера включает небольшой JavaScript-сценарий, который нужно вставить в раздел HEAD:

<script language="JavaScript">
function lightFilter()
{
        ambient.filters.light.addAmbient(255,0,0,255);
        cone.filters.light.addCone(0,0,3,255,255,0,0,255,200,30);
}
</script>

В основной HTML-код добавляем идентификаторы графических изображений "ambient" и "cone" и указываем фильтр light, а также инициализируем функцию фильтра lightFilter() посредством события onload в разделе BODY:

<body onload="lightFilter();">
<img src="flower.jpg" id="ambient" style="filter: light()">
<img src="flower.jpg" id="cone" style="filter: light()">
</body>

Совместное применение нескольких фильтров
Динамический HTML позволяет использовать для одного объекта одновременно несколько фильтров. В этом случае запись фильтров идет через пробел с указанием параметров для каждого из применяемых фильтров. В Примере 4 приведены примеры совместного использования нескольких фильтров: (1) wave(strength=10, add=0, phase=15, lightStrength=25) flipH() - фильтр wave без включения исходного объекта, с интенсивностью наложения 10, фазой смещения 15, трехмерным освещением, равным 25, и фильтр flipH, переварачивающий объект в горизонтальной плоскости; (2) gray() blur(strength=85, add=1, direction=45) - фильтр gray, убирающий цветовую гамму объекта, и фильтр blur, размывающий изображение, с интенсивностью наложения 85, добавлением исходного объекта и с направлением размытия в 45 градусов; (3) xray() alpha(opacity=255, style="2," finishOpacity=0) - фильтр xray, создающий эффект рентгеновского снимка и фильтр alpha со степенью прозрачности объекта 255 и свойством стиля 2 (от центра к воображаемой окружности).

Фильтр blendTrans
Среди общего числа фильтров динамического HTML есть два, позволяющие создавать эффекты анимационных переходов из одного состояния в другое - blendTrans и revealTrans. Разберем на примере первый из них. blendTrans имеет свойства duration (временной промежуток, за который фильтр должен перевести объект из исходного состояния в конечное), visibility (появление/исчезновение объекта) и status (определение состояния перехода). Чтобы реализовать действие этого фильтра , вставляем в раздел HEAD веб-документа небольшой скрипт:

<script language="JavaScript">
var runStart = 0
function runAnimation()
{
        if (runStart == 0)
        {
                runStart = 1
                img.filters.blendTrans.Apply();
                img.src = "flower2.jpg";
                img.filters.blendTrans.Play();
        }
}
</script>

Сразу же после него указываем идентификатор скрипта и событие фильтра:

<script for="img" event="onfilterchange">
runStart = 0
</script>

где "var runStart = 0" - начальное значение переменной перехода; "function runAnimation()" - функция начала перехода;

"img.filters.blendTrans.Apply();" - указание метода Apply(), останавливающего анимационный переход;

"img.filters.blendTrans.Play();" - указание метода Play(), стартующего процесс перехода (инициализируется по щелчку мыши на объекте);

"img.src = "flower2.jpg";" - путь ко второму объекту, соответствующему конечному состоянию перехода по фильтру blendTrans.

Далее в разделе BODY указываем путь к первому объекту (исходное состояние перехода), задаем параметры фильтра и определяем событие начала функции перехода:

<img src="flower.jpg" id="img" style="filter: blendTrans(duration=3);" onclick="runAnimation()">

В результате после инициализации функции перехода (посредством щелчка мыши по исходному изображению) файл flower.jpg в течении трех секунд плавно перейдет в файл flower2.jpg. Далее сработает метод Apply(), приостанавливающий анимационный эффект, который будет отменен, если документ перезагрузить, снова запустив метод Play().

Алексей Петюшкин

Оглавление/Вверх

Бывает ли недорогой хостинг?

Согласитесь, что ко всему дешевому мы относимся с опаской: думаем, нет ли где-то подвоха, может товар фальшивый, а слуга некачественная.
Когда встает вопрос о приобретении хостинга для сайта, то мы подходим с большой осторожностью к выбору провайдера хостинга. В сети развелось немало хостеров, предоставляющих свои услуги за небольшую плату. Мы покупаем такой хостинг, а потом узнаем: обещанный неограниченный трафик - только обещан, потому что вдруг сервера стали загруженными из-за малой пропускной способности; поддержка домена выливается в дополнительную n-ую сумму; а цены указаны вообще без НДС и вам требуется доплатить еще 20%. И все-таки, бывает ли недорогой, но качественный хостинг?

Обратите внимание на одного из крупнейших в России хостинг-провайдеров ЗАО "Вэб Хостинг" (торговая марка BizHost.RU), обслуживающего более 2500 сайтов и предоставляющего свои услуги для жителя любой страны. Вы можете заметить, что их хостинг довольно недорогой. Может ли хостинг быть недорогим, но качественным?! Да! Вы наверное сами видите, как стремительно падают цены на жесткие диски. Этим отчасти объясняется предоставление такого большого дискового пространства за малые деньги. К тому же, подумайте о жесткой конкуренции со стороны других хостеров... А что можно сказать о трафике? В России, крупнейшая точка обмена трафиком - это MSK-IX (M9), находящаяся в Москве. У данного провайдера на эту точку приходится 40 Мбит/с. Общие же каналы имеют пропускную способность 155 Мбит/с. Реальный неограниченный трафик возможен. О серьезности фирмы говорит и возможность предоставления таких услуг, как colocated-хостинг.

Т.е., ответ на вопрос, поставленный в заголовке - "да". Есть и другие, недорогие хостеры, например, Sorix или Webstyle, но BizHost особенно выделяется на их фоне.

Есть вопросы? Пишите, Вам ответят на любые вопросы + Вы получите бесплатную консультацию по вопросам хостинга и переноса домена.

Оглавление/Вверх

Кольцо сайтов

Итак, уважаемые читатели, продолжаю серию рассказов о сервисах предоставляемых системой помощи пользователям Интернет. Сегодня речь пойдет об одном очень интересном сервисе - кольца сайтов. Как и в предыдущих выпусках, материал излагается в виде интервью вопрос-ответ с Анатолием (А).

Д: Что такое кольцо сайтов?
А: Кольцо сайтов - это объединение сайтов сходной тематики с целью обмена посетителями посредством удобной и компактной панели кольца. Иными словами это простой и универсальный способ обмена посетителями, которые заинтересованы в сайтах вашей тематики.

Д: Почему кольца сайтов лучше других способов обмена посетителями?
А: Другие способы обмена посетителями имеют ряд недостатков. Обмен кнопками приносит очень маленький результат. В среднем не более 1 посетителя на 100 посещений страницы, содержащей вашу кнопку. Обмен текстовыми ссылками более эффективен, но стребует от вебмастера определенных усилий на поддержку отдельной страницы со ссылками. Панель кольца содержит всего 5 ссылок - вперед, назад, случайный, список сайтов и вступить. Каждая ссылка ведет на следующий сайт, предыдущий сайт, случайный сайт в кольце, список всех сайтов участвующих в кольце и ссылка для вебмастера который заинтересован в вступлении в данное кольцо. Все остальное уже сделано за вас. Вам только нужно создать свое кольцо или вступить в уже существующее кольцо и установить у себя на сайте панель кольца.

Д: Какие возможности по настройке внешнего вида панели вы предоставляете?
А: Практически неограниченные. Зафиксированы только структура внешнего вида панели кольца. Вы можете настроить цвета, размеры, шрифты, кодировку и т.д. так чтобы панель максимально вписывалась в дизайн вашего сайта.

Д: Что нужно для успешного функционирования кольца?
А: Если вы создаете новое кольцо сайтов, вам нужно обязательно приложить некоторые усилия чтобы привлечь внимание вебмастеров поддерживающих сайты соответствующих тематик. Для этого предусмотрена возможность приглашения других вебмастеров вступить в ваше кольцо сайтов. Так же важно выбрать название для кольца сайтов максимально соответсвующее тематике вашего сайта и сайтов, которые могут участвовать в вашем кольце. Если же в системе уже есть кольцо сайтов, которое подходит под тематику вашего сайта, тогда вам следует вступить в это кольцо, а не создавать новое кольцо сайтов. Ну и конечно же нужно обязательно после регистрации установить панель кольца на свой сайт.

Д: Как заргеистрировать новое кольцо или вступить в кольцо?

А: Подробно об это написано по адресу http://inethelp.ru/webring/about.html

Если у вас возникнут какие-либо вопросы по поводу функционирования системы колец сайтов, просьба задавайте их создателям системы по адресу admin@inethelp.ru а не мне.

Давыденко Дмитрий

Оглавление/Вверх

Эффекты с графикой.

   У каждого из нас в тот день когда купили компьютер, кроме Windows-а на винте нет никакого крутого софта, а если Вы к тому, еще и в первый раз сели за компьютер, то он если и появится - то только через полгода! И PhotoShop один из таких! Например, у меня PhotoShop появился через год. Но в Windows 95\95\2000 есть скромный Paint. В нем не так уж и много функций, но он тоже не слаб... И если у Вас нет PhotoShop-а - то Вы думаете, что крутых эффектов от Paint-а не добьешься... Если Вы из таких - то эта статья для Вас! 

  И так у Вас на компе кроме Paint нет ни какого другого редактора графики... и Вы хотите что нибудь украсить. Ну не бежать же в магазин, и искать там PhotoShop, и причем ни везде есть этот PhotoShop. А легче воспользоваться ниже приведенными шаблонами.