O'Reilly logo

Web Design in a Nutshell, 2nd Edition by Jennifer Niederst Robbins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required