The techniques

Java Applets

Java Scripts

Style Sheets

DHTML tags

ColdFusion tags

Download


When you want to leave foreign sites, press Reset at bottom to launch Assists

[TOP]
Variable Image
Popups by overLIB
Assists - Tips 'n Tricks
Assists - Tips 'n Tricks

 DHTML

DHTML - Dynamic HyperTextMarkupLanguage. What is it ? The best explaination is - DHTML is just a "phrase" necessary for integration of all "programming languages" (HTML, CSS, JavaScripts and probably DOM) to allow specific areas/fields in the screenimage to change values or attributes after it's visualized.

How come ? - The interactivity between the screen (browser - ie the screenprotocol which ables you to look at that much garbage on the screen) and the program which is stored on your server, allow you to define specific functions which is transmitted to the program whenever you move or clicking the mouse in certain areas on the screen. It's just as simple as that. The complexity starts when you try to combine different syntaxes and dependencies.

Dynamic areas are defined as "input/output areas" and are only invoked when they are trigged through mouse movements or clicks (ie keyboard ENTER). In that manner you only transfer a very small amount of "data" to the program compared to if you should transfer the entire screenimage. All this is necessary to keep up the speed and respons.

You may see a typical dynamic effect in addition to a realtime effect when you're scrolling this image up and dowm. Study the following extreme example how to combine 6 different functions in to one TAG.


TOP1

TOP2

TOP3

TOP4

TOP5



Astonishing ?
This is plain html-coding added with some script-codes within the tag. Here is the explaination

First there is a trad table-definition, then comes the mare - After a P or DIV,
A HREF tell to go to URL-link if clicked -
second; show up logical "image1" when mouseover and mouseout (one for each, see the bike) -
third; avoid dottet frame when clicking the mouse -
forth; CF-tag to set correct subdir to launch off.gif when mouse off (see the cell; when mouse off a transparent pic is loaded to maintain the original cell otherwise last image is visual. Retain the original cell you may define background color for each individual cell) -
fifth; when mouse over, launch overLIB -
sixth; when mouse off, close overLIB.

In the above example the TD-tag is occuring 5 times.

 
<TABLE style="BORDER-RIGHT: 0px; BORDER-TOP: #006699 2px solid; BORDER-LEFT: 0px; WIDTH: 95%; BORDER-BOTTOM: #006699 -1px inset; HEIGHT: 25px" bordercolor="#339999" cellspacing="3" bordercolordark="#00ccff" cellpadding="0" width="95%" bordercolorlight="#004974" border="1">
<TBODY>
<TR>
<TD width="20%" bgcolor="#d5d5d5">
<P align="center" nowrap><A HREF="#TOF" onmouseover="on('image1')" onmouseout="off('image1')" onFocus="if(this.blur)this.blur()"><img src="<cfoutput>#request.img.root#</cfoutput>comitato/comitato_off.gif" height="14" border="0" width="99%" alt="TOP1" name="image1" onMouseOver="drc('Did you notice the coloring of the bikelogo ? - Click the button','Comitato - Establishment'); return true;" onMouseOut="nd(); return true;"></P>
</TD>
</TR>
</TBODY>
</TABLE>
 


How is it possible ? I think you have to know how all communications are layered. Way back ISO established the OSI communication layers to standardize the methods of transporting data between computers.

The browser itself is a very complex application covering layers 5 to 7, and hopefully the OS is taking care of layer 3 and 4, to secure that the data you see is the naked truth, and the data you transmit arrives on the right spot.



When you start digging into the datatechniques you soon realize that things are dependent of each other. To get an overview I think howstuffworks is an interesting site for anyone who likes to gain knowledge about this 'n that. Have a nice reading.


Application title

HowStuffWorks


 


Authorized by

HowStuffWorks, Inc.


 


Stay tuned
EriX