Low Bandwidth Rollovers: CSS Positioning | WebReference

Low Bandwidth Rollovers: CSS Positioning


CSS positioning:
many objects occupying the same space

The keys to our technique are:

All of these features are provided by Cascading Style Sheets, through the new positioning properties. For those unfamiliar with CSS, several introductory articles on this site will very quickly bring you up to speed.

Recall that a CSS rule is defined by a selector and a declaration:

    H2 { font-weight: bold } Selector { declaration }

A CSS declaration is, in turn, defined by a property and a corresponding value.

    { font-weight: bold } { property: value }

And, finally, a CSS rule can host many declarations, separated by semi-colons:.

    H2 { color: #003333; font-weight: bold; margin-left: 0 }

Positioning Properties

We can control the position of our HTML by enclosing it in a container tag such as <DIV> or <SPAN>, with a unique ID, and defining a CSS rule for this contained HTML in our stylesheet. There are other ways, without containers, particularly in Explorer, but it is best to get used to this method first.

A good rule to follow: Use <DIV> for block-level elements (requiring a new line before and after) and <SPAN> for inline elements (rendered on same line as preceding and following HTML).

In our document, we now add the following:

    <DIV ID="elMenu"> <IMG SRC="menu.gif" USEMAP="#mpMenu" WIDTH=468 HEIGHT=18 BORDER=0> </DIV>

And our stylesheet reads:

    <STYLE TYPE="text/css"> #elMenu { position: relative } </STYLE>

The hash (#) designates a unique identifier to be used only once in the document. It should be avoided in CSS rules for tags or any non-positioned containment.

Our position property has the value relative because we want our image map to fall relative to the flow of the document. In fact, up to this point, we have done nothing unordinary. Our image is positioned exactly where it would have been even without CSS. Then, why do it?

Every positioned element establishes a new x-y coordinate system for all contained HTML within that element. New positioned elements can now be inserted within the DIV and positioned exactly in relation to our image map.

Nested Elements

With the above in mind, we can now enclose each of the images we have created in new absolutely positioned elements:

    <DIV ID="elMenu"> <DIV ID="elMenuUp"> <IMG SRC="menu.gif" USEMAP="#mpMenu" WIDTH=468 HEIGHT=18 BORDER=0> </DIV> <DIV ID="elMenuOver"> <IMG SRC="menuover.gif" WIDTH=468 HEIGHT=18 BORDER=0> </DIV> </DIV>

Now, reflect these modifications in the stylesheet:

    #elMenuUp { position: absolute; left: 0; // left and top not absolutely top: 0 // necessary as default is 0 } #elMenuOver { position: absolute; left: 0; top: 0 }

Both our images are now occupying the same physical space: They are both at the top left corner of the elMenu element. Since menuover.gif was referenced last, it was placed last, blocking out our image map.


By adding the visibility property, we can control which of the two images is initially visible.

    #elMenuOver { position: absolute; left: 0; top: 0; visibility: hidden }

Now that we have positioned two images, one on top of the other, and hidden one of them, we must find a way to display the hidden image on demand.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 10/16/97

URL: http://www.webreference.com/dhtml/column2/CSSpos.html