Low Bandwidth Rollovers: Popup Elements and BGcolor | WebReference

Low Bandwidth Rollovers: Popup Elements and BGcolor

Logo

One Image Rollover: Part II
popup elements AND bgcolor

By creating CSS elements containing text and controlling their visibility, we can have an unlimited number of popup information layers that react to a mouse event.

Pass your mouse over yet another menu below:

Here we have defined 7 CSS elements with text descriptions of the menu selections. The shading and the borders have been included to give an image effect.

Step by Step

Our popup elements have the following declarations:

#elDetails1 {
    left: 0;
    position: absolute;
    padding-left: 10;
    padding-right: 10;
    background-color: lightgrey;
    layer-background-color: lightgrey;
    font-family: sans-serif;
    font-size: 9pt;
    font-weight: bold;
    visibility: hidden;
    border: thin black solid
}
#elDetails2 {
    left: 90;
    position: absolute;
    padding-left: 10;
    padding-right: 10;
    background-color: lightgrey;
    layer-background-color: lightgrey;
    font-family: sans-serif;
    font-size: 9pt;
    font-weight: bold;
    visibility: hidden;
    border: thin black solid
}
.
.
. 
#elDetails7 {
    left: 340;
    position: absolute;
    padding-left: 10;
    padding-right: 10;
    background-color: lightgrey;
    layer-background-color: lightgrey;
    font-family: sans-serif;
    font-size: 9pt;
    font-weight: bold;
    visibility: hidden;
    border: thin black solid
}

Notice that 9 of the 10 declarations in each rule are exactly the same. Only the property differs. CSS allows us to group declarations into classes. That is, selectors that exist independently of HTML tags but can be assigned to any tag using the CLASS= attribute. In our STYLE rule, the selector is given a unique name, that begins with a period.

Our stylesheet should therefore be modified to read:

    #elDetails2 { left: 90; }
    #elDetails3 { left: 150 }
    #elDetails4 { left: 200 }
    #elDetails5 { left: 260 }
    #elDetails6 { left: 305 }
    #elDetails7 { left: 340 }
    .details {
        position: absolute;           /* group all common */
        padding-left: 10;             /* declarations     */
        padding-right: 10;            /* into one         */
        background-color: lightgrey;  /* CLASS rule       */
        layer-background-color: lightgrey;
        font-family: sans-serif;
        font-size: 9pt;
        font-weight: bold;
        visibility: hidden;
        border: thin black solid
    }

We have completely omitted the definition of #elDetails1 because its only property is left and its value is 0 (zero), the default.

Our usual background and menu-image elements have to be pushed lower in the containment to allow for the popup elements:

#elMenuBG {
        position: absolute;
        top: 25;
        left: 0;
        clip: rect(0 468 18 0); 
	background-color: #DDDDDD;
	layer-background-color: #DDDDDD;
        visibility: hidden;
}
#elMenuIMG {
        position: absolute;
        top: 25;
        left: 0;
}

These elements are placed in our page as:

<div> <div>home</div> <div>send us feedback</div> <div>coooool sites</div> <div>what's new</div> <div>web news</div> <div>find it on our site</div> <div>everything we got</div> <div> <div> <img src="menu.gif" usemap="#mpMenu" width="468" height="18" border="0"/></div> </div>

And our long-suffering mapOver function is now made to read:

function mapOver(which,on) {
    if (!ver4) {return};
    if (IE4) {
        whichEl = document.all.elMenuBG.style;
        detailEl = eval("document.all.elDetails" + which + ".style")
    }
    else {
        whichEl = document.elMenu.document.elMenuBG;
        detailEl = eval("document.elMenu.document.elDetails" + which)
    }
    if (!on) {
        whichEl.visibility = "hidden";
        detailEl.visibility = "hidden";
	return;
    }
    clLeft = arPopups[which][0];
    clRight = arPopups[which][1];
    if (NS4) {
        whichEl.clip.left = clLeft;
        whichEl.clip.right = clRight;
    }
    else {
        whichEl.clip = "rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";
    }
    whichEl.visibility = "visible";
    detailEl.visibility = "visible";
}

Don't forget to add the script for the array and to define the <MAP> as before.

MSIE 4 Note:

Explorer renders the background property differently on absolutely positioned elements than it does on relatively positioned or simple elements. For example:

    <SPAN STYLE="background-color:lightgrey">Back me up!</SPAN>

gives us:

Back me up!

    <SPAN STYLE="position:relative; background-color:lightgrey">Back me up!</SPAN>

displays as:

Back me up!

and

    <SPAN STYLE="position:absolute; background-color:lightgrey">Back me up!</SPAN>

displays as: (difference viewable on IE4 only)

Back me up!




That is, in the first two cases the width reflects the contents, and in the third, the margins.

To work around this, declare widths and text alignment in a MSIE-only SCRIPT at the very end of your page, just before </BODY>. To wit:

. . . <script language="JavaScript1.2"> if (IE4) { document.all.elMenu.style.left = 50; document.all.elDetails1.style.width = 100; document.all.elDetails1.style.textAlign = "center"; document.all.elDetails2.style.width = 200; document.all.elDetails2.style.textAlign = "center"; document.all.elDetails3.style.width = 100; document.all.elDetails3.style.textAlign = "center"; document.all.elDetails4.style.width = 100; document.all.elDetails4.style.textAlign = "center"; document.all.elDetails5.style.width = 100; document.all.elDetails5.style.textAlign = "center"; document.all.elDetails6.style.width = 150; document.all.elDetails6.style.textAlign = "center"; document.all.elDetails7.style.width = 200; document.all.elDetails7.style.textAlign = "center"; } </script>

This example was just skimmed over. Much of the code can be shortened. Careful perusal of the code should make our additions self-explanatory. Backward compatibility we leave to you, using the techniques we have discussed over the last two columns.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 04/13/98

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