DHTML (DynamicHTML) is a combination of several web technologies, but the key technologies are Cascading Style Sheets (CSS), the Document Object Model (DOM) and client-side scripting (mostly - JavaScript). Many things that were previously possible only with Java applets and plug-ins can be done with DHTML now, and you avoid the long loading of the applets or plug -ins (and it's easier to learn DHTML than Java). Below is an example of a calculator made with DHTML. This "pink" calculator is the same like the one on this page, but here in combination with Cascading Style Sheets. The colors and size can easily be changed and customized.
To position the calculator on a page add the appropriate attributes.
Dragging elements on a page (IE): With the appropriate code, nearly everything on a page could be draggable with the mouse: pictures, tables, text etc. To do this, you also have to add the class=sf attribute to the tag, whose content you want to make draggable. Below is an example:
This text can be dragged, but not this one.
Click here to see the code:
<head>
<style>
.sf{position:relative;cursor:hand;color:black}
</style>
<script>
var drag=false;var a,x,y
function mov(){
if (event.button= =1&&drag){
a.style.pixelLeft=p1+event.clientX-x
a.style.pixelTop=p2+event.clientY-y
return false}}
function gj(){
if (event.srcElement.className= ="sf"){
drag=true;a=event.srcElement
p1=a.style.pixelLeft
p2=a.style.pixelTop
x=event.clientX;y=event.clientY
document.onmousemove=mov}}
document.onmousedown=gj
document.onmouseup=new Function("drag=false")
</script></head> An example how to put the class attribute into a tag:
<img src="bild.jpg" class=sf> or for text <span class=sf>Text to drag</span>