Dynamic HTML is not a new markup language. It is a collection of technologies (generally HTML, CSS and JavaScript) which changes the document content once it is loaded into a web browser.
Some examples for dynamism in a web document are given below:
- Changes to document content on user interactions or after a specified time interval or on specific browser events.
- Moving elements to new positions.
- Making elements disappear and reappear.
- Changing the colour of the background and foreground.
- Changing the font properties of elements.
- Changing the content of the elements.
- Overlapping elements in stack order.
- Allow dragging and dropping elements anywhere in the browser window.
As an example let’s consider a web document which contains an imageimage1 initially when the page is loaded. When the user clicks on the image, the image changes to image2 which demonstrates dynamism and hence Dynamic HTML (DHTML).
//HTML Code
<html>
<head>
<title>DHTML Demo</title>
</head>
<body>
<img src=“image1.jpg” id=“image” />
<script type=“text/javascript” src=“script.js”></script>
</body>
</html>
|
//JavaScript code – script.js
function change( )
{
var img = document.getElementById(“image”);
img.src = image2.jpg;
}
document.getElementById(“image”).onclick = change;
|
Take your time to comment on this article.
Comments
Post a Comment