SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : FilterView 1.0
By Petr Krontorad

This demonstrates the filter features of Microsoft Internet Explorer 4.0. It requires a fairly fast pentium to run smoothly.

FilterView Control

Double click anywhere on the document hides or shows the tool image. The circle view inside the tool represents the viewing area. After selecting and applying some of CSS filters this is the place where changes above document will be shown.

When you first start no filter is selected. After activating the tool (by double clicking) press any key (T for example) to see a menu of available filters. You can now choose the filter and specify the appropriate parameters. Unfortunately at this time you need to know the parameters for each filter you'd like to use. The tool is not quite "user-friendly" :). A little help is available after applying your changes by clicking the Apply button. After clicking Apply, you will see the name of your filter and parameters specified as follows in the lower-left corner of the tool:

  • c - color
  • s - strength,
  • d - direction
  • o - opacity etc.

Don't be afraid to experiment with values of parameters. You can't destroy anything, If you specify invalid input you simply see no effect. Color format is classic (#RRGGBB) or you can enter simply red, green, blue etc. Below is an image for experimenting with the banner:

To help you get started, try the following variations of filters and parameters. We recommend you move the mouse over the banner advertisement at the top of this page. Most filters will have no effect on the article text.

  1. activate the tool - doubleclick
  2. press SPACE
  3. select Glow
  4. write green into input text 1.
  5. write 20 into input text 2.
  6. click Apply
  7. move mouse and watch the effect :)

You can create other cool variations. Try Shadow,green,22 ; Blur, false, 135, 15 ...

If you're making dynamic web pages (client-side) CSS filters are very useful. But there are so many variations of effects and can be very difficult to select the right one. With FilterView - you can experiment! For playing with on your page, just use the tool on parts of page you want to "filterize". FilterView provides a quick and easy great preview.

Adding FilterView to any web page

There are two include files "filterview_h.js", "filterview_c.js". First containing executing part of the script (function, global variables), second some necessary HTML (layer definitions, styles etc.).

  1. Define <script language="JavaScript" src="filterview_h.js"></script> paste this HTML sequence between <HEAD> </HEAD>.
  2. Define <script language="JavaScript" src="filterview_c.js"></script> paste this HTML exactly after the tag <BODY> (it's important to be your first tag in the body of HTML document !).
  3. Add next 3 events inside of the <BODY> tag. There are onload="main()" ondblclick="aktivace()" onmousemove="akce()". Your <BODY> should look similary like this <BODY text="#blabla" link="#blabl2" onload="main()" ondblclick="aktivace()" onmousemove="akce()">
  4. Last action is pasting </DIV> exactly before the </BODY> tag. The </DIV> must be the last tag in the body of your HTML document!

Page 1:FilterView 1.0
Page 2:Download Code

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.