Browse DevX
Sign up for e-mail newsletters from DevX


Twelve Dynamic HTML Lessons : Page 2

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.

Dynamic Effects in 5 Minutes
You've seen how easy it is to use CSS; now you'll see how easy it is to modify CSS on the fly for Dynamic HTML.

Dynamic HTML (DHTML) lets you change the Web page based on what a reader does. It's a little like JavaScript, but it goes a step further and lets you change or update any element on the page, dynamically.

One of the most desired interactions on a Web page is to have something change when the reader moves his or her mouse over it. This is called a mouseover event. With Dynamic HTML this effect is very easy to produce. That's because with DHTML, every element of a Web page is exposed via a structure called the Document Object Model (DOM). Don't be put off by the name—all Document Object Model really means is that you can control nearly everything on the page if you know how to address it.

Every element on a Web page has a style associated with it. Even if you didn't declare a style, the browser has a default style for everything. For example, with just normal old HTML and no extra coding:

  • Links are underlined.
  • H1s are flush to the left side of the page.
  • Paragraphs use the browser's default typeface.
  • The body background is grey.

    The list goes on and on, but the point is that every element on the page has a style. Stylesheets, via CSS, let you change those. Now, DHTML lets you change those dynamically. To access these styles and change them dynamically, we need to know just two things:

    1.  The style property we want to change.

    2.  Just a smidgen of simple JavaScript.

    For our sample mouseover example we're going to change the color of our text. In scripting lingo we need to access "style.color" which is where the color of the text is kept. Here's the effect in action; run your mouse over the line of text that follows to see how it works:

    Mouse over this text

    Here's the simple code that let us do this:
    <h3 onmouseover="this.style.color  = 'red';" 
    onmouseout="this.style.color = 'black';">Mouse over this text</h3>
    See how easy it is? "onmouseover" is the event triggered by moving the mouse over the text and "onmouseout" is the event of moving the mouse out of the area. Events are what let us know that something has happened so that appropriate actions can follow.

    The code "this" is the reference for this particular object. Here, "this" refers to the level three heading. The code "style.color" refers to the color of the object "this" and allow us to change the level three heading's color.

    If we wanted to, we could have changed the background color instead. The line of text that follows shows the effect and the code shows how we created the effect:

    Mouse over this text

    <h3 onmouseover="this.style.backgroundColor  = 'red';" 
    onmouseout="this.style.backgroundColor = 'white';">Mouse over this text</h3>

    Any property you want to modify can be accessed in this manner.

    It's also easy to determine the name of the property for scripting. Here's a rule of thumb you can follow:

    To get the scripting property name for a style property, remove the hyphen from the style property name and capitalize the first letter of the word that follows the hyphen. For example:"text-decoration" becomes textDecoration. background-color become backgroundColor, etc.

    There you have it, five minutes of study and you can now do mouseover events with Dynamic HTML!

    A word of caution though. It might seem "cool" to change things like font size on the fly, but think about your end users before you do anything that might cause their text to crawl around their browser. The goal is to create dynamic, elegant and useful interfaces for the Web—not just to prove that you can create DHTML.

  • Thanks for your registration, follow us on our social networks to keep up-to-date