Artykuł ukazał się drukiem w Magazynie INTERNET

Więcej informacji dotyczących sposobów tworzenia stron opartych o DHTML znajdziesz pod adresem: http://www.szewo.com/dhtml.



go to: main / publications /

Wszystko o filtrach Internet Explorera


Możliwości oferowane przez najnowsze produkty Microsoftu burzą tradycyjne wyobrażenie o przeglądarce, jako programie służącym tylko do wyświetlania stron internetowych. Najnowsze produkty Microsoftu mogą realizować zadania zarezerwowane dotychczas dla programów graficznych.

Przeglądarka Microsoft Internet Explorer począwszy od wersji 4.0 udostępnia tzw. filtry, które umożliwiają dodawanie różnego rodzaju efektów do elementów znajdujących się na stronie WWW. Definiowanie filtrów na stronie internetowej polega na wykorzystywaniu CSS (Cascading Style Sheets). Aby dodać do konkretnego elementu na stronie WWW filtr wykorzystujemy atrybut filter, którego składnia wygląda następująco: 
filter:nazwa_filtra(parametry)
Elementy, dla których chcemy zdefiniować filtry powinny być albo pozycjonowane (mieć określone współrzędne umieszczenia na stronie WWW), albo zadeklarowane szerokość i wysokość. Filtry możemy stosować między innymi w następujących znacznikach kodu HTML: DIV, IMG, INPUT, SPAN, TABLE,TD, TEXTAREA, TH, TR. Możemy także stosować filtry dla elementów (kontrolek) wykorzystujących technologię ActiveX.

Każdy filtr ma indywidualną listę parametrów (patrz zestawienie), przy pomocy której konfigurujemy konkretny efekt. Wspólny dla wszystkich efektów jest parametr enabled.

Stosowanie filtrów

Poniższy fragment definiuje dla zwykłego fragmentu tekstu filtr Alpha. 

<div style="position:relative; width:100; height:100; 
 Filter: ALPHA(Opacity=100, FinishOpacity=5, Style=1, 
 StartX=0, StartY=0, FinishX=40, FinishY=120)">
Dla zwykłego tekstu<BR>filtr Alpha<BR>działa własnie tak
</div>
Obiekt na stronie WWW może mieć zdefiniowany więcej niż jeden filtr. W poniższym przykładzie dla pliku graficznego określono dwa filtry: 

<div style=" position:relative; width:100; height:100; 
 Filter: FLIPH() BLUR(add=1,direction=135,strength=10)">
<img src="obrazek.gif" width=90 height=90 border=0 alt="">
</div>
Filtr FLIPH powoduje, że wyświetlany obrazek jest obrócony w poziomie, BLUR umożliwia osiągnięcie efektu rozmycia znanego z wielu programów graficznych. Pierwszy z filtrów nie ma żadnych dodatkowych parametrów.

Włączanie i wyłączanie efektów

W celu manipulowania filtrami możemy wykorzystywać skrypty języka JavaScript. Jak już wcześniej wspomniano, każdy filtr ma parametr enabled, który określa czy dany efekt jest aktualnie aktywny. Kod JavaScript, wyłączający działanie konkretnego filtra może wyglądać następująco: 

nazwa_obiektu.filters.
  item(nr_filtra_dla_obiektu).enabled=false
Dla każdego obiektu filtry są numerowane od zera. Oznacza to, że w następującym przykładzie zdefiniowanych filtrów: 

STYLE="position:absolute; Filter:
  BLUR(direction=180) DROPSHADOW()"
BLUR ma numer 0, a DROPSHADOW numer 1. Przedstawiony poniżej kod strony umożliwia włączanie i wyłączanie filtra zdefiniowanego dla pojedynczego obrazka: 

<html>
<head>
<title>Włączanie i wyłączanie filtrów</title>
<script>
<!--
//funkcja nadajaca filtr
function nadaj() {
obrazek.filters.item(0).enabled=true
}

//funkcja zdejmujaca filtr
function zabierz() {
obrazek.filters.item(0).enabled=false
}
-->
</script>
</head>
<body>
<img src="obr.gif" id="obrazek" width=391 height=275 
  style="Filter: 
 BLUR(enabled=0,add=1,direction=135,strength=10)">
<br>
<a href="javascript:nadaj()">Nadaj filtr</a><br>
<a href="javascript:zabierz()">Usun filtr</a>
</body>
</html>
Funkcje nadaj() i zabierz() w prosty sposób odwołują się do parametru enabled filtra o numerze zerowym.
Wykorzystując filtry Internet Explorera możemy prezentować na stronach WWW pliki graficzne poddane różnego rodzaju obróbkom. Nie bez znaczenia jest fakt, że jeżeli na danej stronie internetowej znajduje się obrazek w kilku wersjach (np. zdjęcie w wersji czarno białej, kolorowej, rozmytej), to odpowiedni plik graficzny będzie pobierany z sieci tylko raz, a za stworzenie kolejnych wersji będzie odpowiedzialna przeglądarka.

Szersze korzystanie ze skryptów

Zestawiając języki skryptowe i filtry możemy tworzyć bardzo ciekawe efekty. Na stronie, której kod został przedstawiony poniżej połączenie JavaScript i możliwości Internet Explorera zaowocowało stworzeniem ciekawego bannera z prostego pliku graficznego: 

<html>
<head>
<title>Przykład zastosowania filtra i JavaScript</TITLE>
</head>
<body>
<div id=banner style=" position:relative; 
  width:100; height:100; filter:Alpha(opacity=0)">
<img src="obrazek.GIF" width=100 height=88>
</div>
<script>
skok = 5
function fade()  {
 if((banner.filters.Alpha.opacity + skok == 100)||
   (banner.filters.Alpha.opacity + skok == 0))
  skok = - skok
 banner.filters.Alpha.opacity += skok
}
setInterval('fade()', 100)
</script>
</body>
</html>
Wywoływana w regularnych odstępach czasu funkcja fade() modyfikuje parametr opacity filtra Alpha, przez co stopień przezroczystości obrazka ulega zmianom. Ponieważ parametr opacity przyjmuje wartości od 0 do 100 stopień przezroczystości jest cyklicznie zwiększany i zmniejszany o wartość zmiennej skok.
Zatem uzyskaliśmy obrazek, który stopniowo pojawia się i znika na stronie WWW.

To nie wszystko...

Oprócz wymienionych w zestawieniu przeglądarka Microsoft Internet udostępnia także filtr o nazwie Light, który umożliwia tworzenie bardzo ciekawych efektów. Jest to także najbardziej skomplikowany w obsłudze filtr umożliwiający najwięcej parametrów i możliwości. Prezentacja tego filtra znajdzie się w jednym z kolejnych artykułów.

Zestawienie filtrów

Alpha
Nadaje przezroczystość wybranemu elementowi na stronie WWW. Filtr ma następujące atrybuty:
  • OPACITY - określa stopień przezroczystości (wartość od 0 do 100, gdzie 100 oznacza całkowitą przezroczystość),
  • STYLE - określa ewentualny kształt gradientu (wartość 0 - brak gradientu, 1 - gradient liniowy, 2 - gradient kołowy, 3 - gradient prostokątny),
  • FINISHOPACITY - określa stopień przezroczystości dla gradientu (wartość od 0 do 100, gdzie 100 oznacza całkowitą przezroczystość),
  • STARTX - współrzędna pozioma dla początku strzałki gradientu,
  • STARTY - współrzędna pionowa dla początku strzałki gradientu,
  • FINISHX - współrzędna pozioma dla końca strzałki gradientu,
  • FINISHY - współrzędna pionowa dla końca strzałki gradientu.


Blur
Umożliwia rozmycie obiektu w określonej długości i kierunku (wrażenie że obiekt porusza się z dużą prędkością).
  • ADD - określa, czy na stronie widoczny jest tylko efekt działania filtra (wartość 0), czy także oryginalny obiekt bez rozmycia (wartość 1),
  • DIRECTION - ustala kąt rozmycia względem kierunku ku górze, zgodnie z ruchem wskazówek zegara.
  • STRENGTH - długość rozmycia w pikselach.


Chroma
Nadaje przezroczystość wybranemu obiektowi.
  • COLOR - kolor definiowany jako przezroczysty.

    DropShadow
    Pozwala na wprowadzenie wrażenia, że obiekt znajduje się ponad stroną WWW, na którą rzuca cień.
    • COLOR - kolor rzucanego cienia.
    • OFFX - określa odległość cienia od obiektu w pikselach wzdłuż osi poziomej. W przypadku, gdy wartość tego parametru jest dodatnia cień jest rzucany w prawą stronę. Gdy wartość parametru jest ujemna, cień pada w lewą stronę.
    • OFFY - określa odległość cienia od obiektu w pikselach wzdłuż osi pionowe. Gdy wartość parametru jest dodatnia, cień jest skierowany w dół. Aby cień był skierowany w górę parametr musi mieć wartość ujemną.
    • POSITIVE - przyjmuje wartości TRUE lub FALSE. Umożliwia wyłączenie rzucania cienia przez punkty przezroczyste obiektu.


    FlipH
    Umożliwia uzyskanie lustrzanego odbicia obiektu w poziomie.

    FlipV
    Umożliwia uzyskanie lustrzanego odbicia obiektu w pionie.

    Glow
    Dodaje obiektowi poświatę
    • COLOR - określa kolor poświaty.
    • STRENGTH - intensywność poświaty.


    Gray
    Przekształca paletę barw obiektu kolorowego na odcienie szarości

    Invert
    Dla każdego piksela obiektu zmienia na przeciwne wartości natężenia, barwy oraz jasności.

    Mask
    Pozwala nadać przezroczystym punktom obiektu jakiś kolor, czyniąc pozostałe punkty przezroczystymi.
    • COLOR - definiuje kolor, który pozostanie przezroczysty.


    Shadow
    Daje możliwość wprowadzenia efektu cienia pochodzącego od obiektu w określonym kierunku i kolorze.
    • COLOR - kolor cienia.
    • DIRECTION - ustala kąt padania cienia względem kierunku ku górze, zgodnie z ruchem wskazówek zegara.


    Wave Umożliwia przedstawienie obiektu na pofałdowanej powierzchni
    • ADD - określa czy wyświetlany jest także nie pofałdowany obraz (jeżeli wartość jest różna od zero), czy też tylko efekt zastosowania filtra,
    • FREQ - parametr określa liczbę pofałdowań, jakie mają być widoczne,
    • LIGHT - intensywność światła (możliwe wartości 0-100),
    • PHASE - określa procentowo długość fali, od której rozpocznie się pofałdowanie obrazu.
    • STRENGTH - wartość określająca intensywność pofałdowania.


    XRay
    Zmienia głębie kolorów wyświetlanego obiektu i wyświetla go w kolorach czarno-białych. Zastosowanie tego efektu pozwala uzyskać rezultaty podobne do zdjęć rentgenowskich.