How DHTML Works

As I mentioned earlier, DHTML is a combination of HTML, Cascading Style Sheets, JavaScript, and the Document Object Model. Example 29-1 illustrates how these elements work together. The web page shown here uses simple DHTML to change the style of links to be red and underlined when the mouse is rolled over them. You can use this basic format to tie CSS styles to common events like onMouseOver or OnClick, so you can change the styles of most elements on the fly.

Example 29-1. Rollover style changes using DHTML 

<html>   (A)
<head>
<title>Rollover Style Changes</title>

<style>   (B)
<!--
a { text-decoration: none; }
-->
</style>

<script>   (C)
<!--
function turnOn(currentLink) {
    currentLink.style.color = "#990000";   (D)
    currentLink.style.textDecoration = "underline";
}

function turnOff(currentLink) {
    currentLink.style.color = "#0000FF";
    currentLink.style.textDecoration = "none";
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF">
<a href="#home"   (E)
   onMouseOver="turnOn(this);" onMouseOut="turnOff(this);">Home</a>
<a href="#contact" 
   onMouseOver="turnOn(this);" onMouseOut="turnOff(this);">Contact</a>
<a href="#links" 
   onMouseOver="turnOn(this);" onMouseOut="turnOff(this);">Links</a>
</body>
</html>
(A)

This page is an HTML file, so it starts with normal <html> and <head> HTML tags.

(B)

In the <head>, we have a CSS style sheet, defined using the <style> tag, that removes any text decorations from all the links in the document. In this case, the point is to remove the default underlines ...

Get Web Design in a Nutshell, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial