Topic for today: DHTML 101
Most people know HTML so today I'll talk about how to code some basic DHTML (Dynamic HTML). The concept is simple to grasp; Any HTML that changes itself to suit the user is DHTML.
First you must give each object that is going to change in the HTML a name (this makes it easy to find later). To do this simply add:
Next you usually want an easy way find it, which varies from browser to browser. To make this easier to made a simple function that gets it for any browser.
ret = document.getElementById(id);
else if (document.all)
ret = document.all[id];
else if (document.layers)
ret = document.layers[id];
The most common form of DHTML is a pop up menu when you mouse over a link.
We do this using the <DIV> tag. you can do a lot of things with the div tag but this time we will focus on their ability to be hidden.
simply make a div tag like this:
|<DIV id="bob" style="visibility:hidden; position:absolute; left:100px; top:150px;">|
Now the easy part: showing and hiding the div tag. To do this simply call Object.style.visibility="visible" (or "hidden") to show/hide the tag. So all we need to do is make a link that has
Since I can't show you everything, you can have the fun of figuring out how to add a timer to auto-hide the div if you don't move your mouse into it.