Low Bandwidth Rollovers: CSS Positioning

CSS positioning:
many objects occupying the same space

The keys to our technique are:

• the ability to position more than one HTML object in the same physical space.
• the ability to hide or show whichever object we choose.
• the ability to select which part of the object we show.

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.
Visibility
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: https://www.webreference.com/dhtml/column2/CSSpos.html