DHTML

DHTML stands for Dynamic HTML. It combines JavaScript with CSS and HTML to make great looking interactive web pages.

HTML DOM

HTML DOM stands for HTML Document Object Model. HTML DOM defines the objects and properties of HTML elements and methods to access them. Every object must have unique id.

Click on text

By clicking on the text a JavaScript event is triggered which modifies the content of the label tag.

<html>
<head>
<script type="text/javascript">
var counter = 0;
function click() {
counter++;
document.getElementById("counter").innerHTML = counter;
}
</script>
</head>
<body>
<label id="counter" onclick="click()">0</label>
</body>
</html>

Example

Changing icon on mouseover

In this example you can see how to access and modify 'src' attribute of html tag.

<html>
<head>
<script type="text/javascript">
function mouseOver() {
document.getElementById("pict").src ="icon-over.png";
}
function mouseOut() {
document.getElementById("pict").src ="icon.png";
}
</script>
</head>
<body>
<a href="http://www.matjazcerkvenik.si">
<img border="0" src="icon.png" id="pict" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</a>
</body>
</html>

Example

Interactive maps

<html>
<head>
<script type="text/javascript">
function displayText(txt) {
document.getElementById("txt").innerHTML=txt;
}
</script>
</head>
<body>
<img src="Two-trucks.png" width="96" height="48" alt="Trucks" usemap="#trucks" />
<map name="trucks">
<area shape ="rect" coords ="0,0,48,48" onMouseOver="displayText('Red truck')" />
<area shape ="rect" coords ="48,0,96,48" onMouseOver="displayText('Grey truck')" />
</map>
<p id="txt"></p>
</body>
</html>

Example
Trucks

Counter

The setTimeout() method calls the doCount() method and therefore creates a loop.

<html>
<head>
<script type="text/javascript">
var count = 0;
var timer;
function doCount() {
document.getElementById('lbl').value = count;
count = count + 1;
timer = setTimeout("doCount()", 1000);
}
</script>
</head>
<body onload="doCount()">
<input id="lbl" value=""/>
</body>
</html>

To stop the timer call this function:

function stopTimer() {
clearTimeout(timer);
}

Example

Change style

This example shows how to change style of an html element.

<html>
<head>
<script type="text/javascript">
function changeColor() {
var color = document.getElementById("color").style.color;
if (color == "black") {
color = "red";
} else {
color = "black";
}
document.getElementById("color").style.color = color;
}
</script>
</head>
<body>
<label id="color" style="color: black;" onclick="changeColor();">Text</label>
</body>
</html>

Example

Image transparency

With CSS you can set transparency/opacity of an image. Parameter opacity is not standardized by CSS 2, but it is anyway supported by most browsers. Well, as expected this feature behaves differently in IE. While most Mozilla-like browsers understand 'opacity:value' notation in CSS, IE understands 'filter:alpha(opacity:value)' CSS notation.

<html>
<head>
</head>
<body>
<img src="icon.png" style="opacity: 0.3; filter: alpha(opacity=30);"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30"/>
</body>
</html>

Example

Make element invisible

This example makes element invisible. The element is still on the page, but it cannot be seen.

<html>
<head>
</head>
<body>
<script type="text/javascript">
function makeInvisible() {
document.getElementById("invisibleTruck").style.display = "none";
}
</script>
<img id="invisibleTruck" src="img/Truck-icon.png" onclick="makeInvisible()"/>
</body>
</html>

Example