Learn DHTML Step by Step

DHTML(Dynamic Hyper Text markup Language)  is NOT a language. It is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS. It is an extension of HTML that enables, among other things, the inclusion of small animations and dynamic menus in Web pages. DHTML is the combination of HTML, Cascading Style Sheets, and Javascript used to create dynamic Web content which can move, hide, or animate as a result of user events. Dynamic Hyper Text Markup Language is a technique in which HTML elements move across the page.

The DOM is separated into 3 different parts / levels:

Core DOM – standard model for any structured document
XML DOM – standard model for XML documents
HTML DOM – standard model for HTML documents.

Below is the table  of content for DHTML lessons.

Move Cursor Image

Move Cursor Image

<html>
<head>
<script type=”text/javascript”>
function cursor(event){
document.getElementById(‘trail’).style.visibility=”visible”;
document.getElementById(‘trail’).style.position=”absolute”;
document.getElementById(‘trail’).style.left=event.clientX+10;
document.getElementById(‘trail’).style.top=event.clientY;}
</script>
</head>
<body>
<div onmousemove=”cursor(event)” width=”200px” height=”200px” style=”background:red”>
<h1>Move the cursor over this Area</h1>
<img id=”trail” style=”visibility:hidden” src=”paktutorial.png” width=”100″ height=”30″ ></div>
</body>
</html>

DEMO HERE

Dhtml Blink Text

DHTML Blink Text

<html>
<head>
<script type=”text/javascript”>
function blinking_header()
{
if (!document.getElementById(‘blink’).style.color)
{
document.getElementById(‘blink’).style.color=”red”;
}
if (document.getElementById(‘blink’).style.color==”red”)
{
document.getElementById(‘blink’).style.color=”black”;
}
else
{
document.getElementById(‘blink’).style.color=”red”;
}
timer=setTimeout(“blinking_header()”,100);
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload=”blinking_header()” onunload=”stoptimer()”>
<h1 id=”blink”>Blinking header</h1>
</body>
</html>

View Output

Dhtml Example Tooltip

Dhtml Example Tooltip

<html><head>

<script>

function gettip(txt)

{

document.getElementById(‘tip’).innerHTML=txt;

}

function reset()

{

document.getElementById(‘tip’).innerHTML=””;

}

</script>

</head>

<body>

<p>Mouse over these drinks:</p>

<span onmouseout=”reset()”>Coffee</span>

<br /><br />

<span onmouseout=”reset()”>Milk</span>

<p id=”tip”></p>

</body>

</html>

OUTPUT:

Mouse over these drinks:

Coffee

Milk

Text Change Position

Text Change Position

<html>
<head>
<script>
function moveleft()
{
document.getElementById(‘header’).style.position=”absolute”;
document.getElementById(‘header’).style.left=”0″;
}
function moveback()
{
document.getElementById(‘header’).style.position=”relative”;
}
</script>
</head>
<body>
<h1 id=”header” onmouseover=”moveleft()” onmouseout=”moveback()”>
Mouse over this text</h1>
</body>
</html>

OUTPUT:

Mouse over this text

Change Text On Mouse Over

Change Text On Mouse Over

<html>
<head>
<script>
function nameon()
{
document.getElementById(‘h2text’).innerHTML=”WELCOME!”;
}
function nameout()
{
document.getElementById(‘h2text’).innerHTML=”How are you today?”;
}
</script>
</head>
<body>
<h2 onmouseout=”nameout()” onmouseover=”nameon()”  id=”h2text”>
Mouse over this text!</h2>
</body>
</html>

Mouse over this text!

DHTML DOM innerText

<html>
<body>
<h1 id=”header”>Old Header</h1>
<script type=”text/javascript”> document.getElementById(“header”).innerHTML=”New Header”;
</script>
<p>”Old Header” was changed to “New Header”</p>
</body>
</html>

OUTPUT:

Old Header

“Old Header” was changed to “New Header”

Event on Double click

Event on Double Click

<html>
<head>
<script>
function gettip(txt)
{
document.getElementById(‘tip’).innerHTML=’is about Create websites by using scripting technologies for the World Wide Web’;
}
</script>
</head>
<body>
<p>Double click the “Paktutorial.com”</p>
<table>
<tr>
<th valign=”top”>Paktutorial.com</th>
<th> </th>
</tr>
</table>
</body>
</html>

OUTPUT:

Double click the “paktutorial.com”

Paktutorial.com