• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint