Cascading Style Sheets (5) rollovers!

Last week, in the fourth part of our exploration of Cascading Style Sheets, which has mysteriously but logically morphed into a discussion of dynamic HTML and the document object model, we promised a more complex example of the image rollover technique. Here’s the code.

Last week, in the fourth part of our exploration of Cascading Style Sheets, which has mysteriously but logically morphed into a discussion of dynamic HTML and the document object model, we promised a more complex example of the image rollover technique. Here’s the code:

In this example, we set up an array of image objects to hold the various button states. Here we have allocated and initialized images for the onMouseOver and onMouseOut states but we could also add the onMouseDown, onMouseUp and onClick states if we wanted to be really flashy.

In the body of the document we create a button using an image in a link and define the handlers for the events. Because the code is so simple we’ve put the JavaScript in the arguments for the events. The alternative would have been to declare functions in the head like this:

function BtOver() {

document.button1.src = button1image[0].src;

}

function BtOut() {

document.button1.src = button1image[1].src;

}

And then call the event handlers this way in the body:

Note that the declaration “javascript:void” prevents JavaScript from returning a value. This is actually just for tidiness, as you only need to be mindful of unwanted return values with JavaScript in tags such as hyperlinks, where a returned value would have a side effect. For example:

Just some site.

igging deeper

This JavaScript code opens a new browser window that then loads the specified URL. The side effect is that the code in the first window also returns an object whose type is “window,” actually a pointer to the new window. This object is expected to be an object of the type “undefined” (which is not acted on) or an object of the type “string” (to be interpreted as a URL as the parameter of the “href”).

In the example above, however, there is an object, and as it is not an expected object type the window simply will display the obscure message “[object]” – something that is most likely not what you’d want. So using the following code:

Just some site.

. . . would leave the document that launched the new window alone by not returning anything from the function. But we digress . . .

The version of the rollover code above is more generic than last week’s version, but you could easily improve on it. You could, for instance, create an array of arrays to store all the button images for a page and build new event handlers that take as an argument the ID of the button they are to dynamically modify. We leave this as an exercise for the reader . . .

Now consider the following code:

The color of danger is red!

What will this code do in the presence of a CSS being applied to the page it is in?

Find out next week. Had enough of CSS yet? Want more? Tell gearhead@gibbs.com.