A more DYNAMIC profile !!!

Let's experiment with DHTML

(surprise: all of this will NOT work when using Netscape  * sigh *)

INTRODUCTION

Very nice effects can be obtained with DHTML (Dynamic-HTML) For example, you can add a filter to an existing image, to make the edge transparent or give it a blurry look. Not only images can be altered, but also your whole profile or just a part of it. All possibilities will be described in this help section. Together with a detailed explanation how to use them. There are many options, so you have to experiment with all of them to find the one that will be suitable for your profile. Some of the codes will look complicated so using DHTML is especially suitable for the more experienced users...

Because of the policy used by the designers of the chat rooms, some of the DHTML codes can not be used. But when you like to use them for a web page you are designing, the possibilities are unlimited. Some of the codes are more complicated then really necessary but sometimes it has to be that way because they are designed to be used at profiles and not especially for web pages...

TOP

EFFECTS WITH IMAGES

We will use the image below to explain all the possible effect. Of course you can use any image you like. The code of the image we use now is:
<img src=http://home-3.worldonline.nl/~tl231984/img/rentadabo2.jpg>

Below here you find the table with all filters (effects) which can be used to alter the look of an image. Just move the mouse pointer over the several names of the effects to see what happens.

To add these effects to your image, you have add a style code to the code for adding an image to your profile. We will give first a general code. So, the below code is only to let you see how the structure of the code works:

<img style="filter:filtername(filteroption1=..,filteroption2=.., etc)" src=http://address>

Lets go to work, below here you find a table with all filters you could try above here:

• The first column contains the filter name.
• The second column contains the code you have to use in your profile to add the filter to the image. We use our example image  (http://home-3.worldonline.nl/~tl231984/img/rentadabo2.jpg) and you have to replace that with the address of the image you want to use.
• The third column contains all options which belongs to the filter. Just experiment with the option to see what you like the most.

BE AWARE: When typing the code in your profile, never use ENTER. 

There are to much options to describe here. So, the table below will direct you to a Web Page of Microsoft which will explain them all. Just click at the option and you will go to the page that is corresponding to the filter you choose. At the member table at that site you will find the explanation of all filter options.

When clicking at the options behind the filter 'alpha' you will find the option 'FinishOpacity' , you can use too. This option can be used to set the end transparency. You can use the values 0 (completely transparend) or 100 (opaque). When using this option the complete code will look as follows:  

<img style="filter:alpha(opacity=85,style=2,finishopacity=30)" src=http://home-3.worldonline.nl/~tl231984/img/rentadabo2.jpg>

Below you will see the difference between using the 'finishopacity'  or not using it. The first image is without the option, te second with the option.

TOP

EFFECTS WITH YOUR PROFILE

We have made a small test profile to show you the effects you can add to your own profile by using filters. Move your mouse pointer over the filters at the bottom of the table en see the change.

To the profile of DHTML DUDE We made this profile to show all effects, which you can apply to your profile by using DHTML filters Above here an image to show what will happen with that...
alpha	fliph	invert	dropshadow
blur	flipv	wave	shadow
xray	gray	glow

For using these DHTML filters, you have to add the filter code at the <h5 style=..> code on top of your profile. Always use the code   width=100% it. The general code for adding a filter effect combined with the codes for a border and a background is: (at the table below you will find all filter codes, which can be present at the location of the red text at the general code)

<h5 style="width:100%;filter:filtername(filteroption1=..,filteroption2=.., etc.); margin-right: 0;padding: 3; border: .. .. ..; background: url(..........)">

Be aware of the fact that it is possible that downloading your profile could become slow, when using a filter for your complete profile. Especially when your profile is rather big already. We even experienced that a computer freezes, while trying to view a big profile with a filter, so please keep this in mind ...

There is one mayor BUT ... when using the filters  'glow' , 'dropshadow' or  'shadow' and you are using codes to change the font at other locations in your profile (for example:  <h5 style="color:red; font-family:Comic Sans MS">), you need to add the filter to these codes too, otherwise they will not work:

<h5 style="width:100%;filter:filtername(filteroption1=..,filteroption2=.., etc.); color:...; font-family:......">

You also can add a new <h5 style="..> code to apply the filter to only a small part of your profile. (do not forget to close the code with  </h5>):

<h5 style="width:100%;filter:filtername(filteroption1=..,filteroption2=.., etc.)">This contains the part of your profile on which you want to have the filter effect</h5>

OK ... enough theoretical mambo jambo ... let's do it ... , below here you will find a table with all DHTML filters which you could see at the example profile above.

• The first column contains the filter names.
• At the second column you will find the needed codes to add to the <h5 style="..> code at the top of your profile. Just replace the red text at the general code with the code at this table, to get the effect you want. And when you cant figure it out ... some completed example codes are present below the table.
• The third column contains the options to change the the appearance of the filter you used. Just experiment to find out the one you like the best.

BE AWARE: when typing the code, do NOT use enter!!!

Some examples: 

When using an alpha-filter for the complete profile the code could be as follows:

<h5 style="width:100%;filter:alpha(opacity=85, style=2);margin-right: 0;padding: 3; border: medium ridge red ; background: url(http://home-3.worldonline.nl/~tl231984/bg/bgpuzzel.gif)"><h5 style="color:red; font-family:Comic Sans MS">

The code for a glow effect would look like follows:

<h5 style="margin-right: 0;padding: 3; border: medium ridge red ; background: url(http://home-3.worldonline.nl/~tl231984/bg/bgpuzzel.gif)"><h5 style="width:100%;filter:glow(color=yellow);color:red; font-family:Comic Sans MS">

The code you cloud use to get the shadow effect to only a small part of your profile (we used here h4 to make the text a bit bigger): 

<h4 style="width:100%;filter:shadow(color=black)">This text will have a shadow effect .. </h4>

This was again a lot of reading and learning. We end this page with some links, which contain a lot of information about using DHTML filters and the options to use ...

TOP