DHTML Examples

Now that you have a basic understanding of the Document Object Model and know how to create layers, we can look at some useful examples to get you started on your own DHTML sites.

Rollover Style Changes

We already examined this script back in Example 29-1. When the user rolls the mouse over a link, the style of the text is changed to be red and underlined. This is done by manipulating the style property of links via the DOM. As we discussed earlier, the style property gives access to all of the CSS properties for an element. Using JavaScript, we can change the values of the color and textDecoration CSS properties when particular events occur. In this case, we use the onMouseOver and onMouseOut events. Here’s the script again, to refresh your memory: 

<html>
<head>
<title>Rollover Style Changes</title>

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

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

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

<body bgcolor="#FFFFFF">
<a href="#home" 
   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>

You can adapt this script for your own site by changing the ...

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