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
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