HOW TO: Create CoolBar Controls in DHTML (315724)

SUMMARY

This article describes how you can create a CoolBar control by using Microsoft JScript. You can use the CoolBar control in a Web page by using Dynamic Hypertext Markup Language (DHTML). The CoolBar control is a set of buttons that change color when you move the pointer over the buttons and then click the buttons.

back to the top

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that you must have:

Internet Explorer 5.0 or later

This article assumes that you are familiar with the following topics:

Hypertext Markup Language (HTML) and DHTML

back to the top

Create a CoolBar Demonstration Page

Open a text editor such as Notepad, and then use the code in the next three steps to create a new HTML file.

Add the following HTML code to the HTML file:

<HTML>
<HEAD>
<STYLE type="text/css">
.basicButton 
{
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: black 1px solid; 
    FONT-WEIGHT: bold; 
    BORDER-LEFT: black 1px solid; 
    WIDTH: 97px; 
    COLOR: white; 
    BORDER-BOTTOM: black 1px solid; 
    FONT-FAMILY: ; 
    HEIGHT: 26px; 
}
</STYLE>

Add the following script to the HTML file:

<SCRIPT ID=clientEventHandlersJS LANGUAGE=JScript>
<!--
var bars;

// Initialize CoolBar data and the initial state.
function InitCoolbar()
{
   var j;
   bars = new Array(1);

   bars[0] = thisForm.button1;
   bars[1] = thisForm.button2;
   bars[2] = thisForm.button3;
    
   for(j = 0; j < bars.length; ++j)
   {
       bars[j].style.backgroundColor = "cornflowerblue";
   }
}

function Cool_MouseOver()
{
	var src = window.event.srcElement;
	if (src.style.backgroundColor != "orangered")
	   src.style.backgroundColor = "dimgray";
}

function Cool_MouseOut()
{
	var src = window.event.srcElement;
	if (src.style.backgroundColor != "orangered")
	   src.style.backgroundColor = "cornflowerblue";
}

function Cool_Click()
{
   var src = window.event.srcElement;
   if (src.style.backgroundColor == "orangered")
      src.style.backgroundColor = "cornflowerblue";
   else
   {
	   var j;
	   for (j = 0; j < bars.length; ++j)
	   {
	      if (src == bars[j])
            bars[j].style.backgroundColor = "orangered";
	      else
            bars[j].style.backgroundColor = "cornflowerblue";
	   }
   }
   
   alert("You clicked: " + src.name + " (" + src.value + ")");
}
//-->
</SCRIPT>
</HEAD>

Add the following HTML controls to the HTML file:

<BODY OnLoad="InitCoolbar();">
<FORM NAME=thisForm METHOD=POST>

<TABLE BORDER=0 WIDTH=297 ALIGN=LEFT CELLPADING=0 CELLSPACING=0 
       BGCOLOR=LIGHTGREY>
<TR>
    <TD WIDTH=33% ALIGN=CENTER>
        <INPUT CLASS=basicButton TYPE=BUTTON SIZE=48 VALUE=Search 
               BORDER=0 ID=button1 NAME=button1 LANGUAGE=JSCRIPT 
               ONMOUSEOVER="Cool_MouseOver();" 
               ONMOUSEOUT="Cool_MouseOut();" 
               ONCLICK="Cool_Click();">
    </TD>
    <TD WIDTH=33% ALIGN=CENTER>
        <INPUT CLASS=basicButton TYPE=BUTTON SIZE=48 VALUE=Links 
               BORDER=0 ID=button2 NAME=button2 LANGUAGE=JSCRIPT 
               ONMOUSEOVER="Cool_MouseOver();" 
               ONMOUSEOUT="Cool_MouseOut();" 
               ONCLICK="Cool_Click();">
    </TD>
    <TD WIDTH=33% ALIGN=CENTER>
        <INPUT CLASS=basicButton TYPE=BUTTON SIZE=48 VALUE=Tools 
               BORDER=0 ID=button3 NAME=button3 LANGUAGE=JSCRIPT
               ONMOUSEOVER="Cool_MouseOver();" 
               ONMOUSEOUT="Cool_MouseOut();" 
               ONCLICK="Cool_Click();">
    </TD>
</TR>       
</TABLE>
</FORM>
</BODY>
</HTML>

Save the HTML file as CoolBarDemo.htm.

back to the top

Verify That It Works

Start Internet Explorer, and then open the CoolBarDemo.htm file. Notice that the HTML file displays a CoolBar control that contains three buttons.
Move the pointer over each button. Notice that the buttons change color from cornflower blue to dim gray.
Click a button. Notice that the button changes color to orange-red and remains that color until you click another button. Additionally, notice that a message box indicates which button you clicked.

back to the top

Incorporate the Code into Your DHTML File

To use this code in your DHTML file, follow these steps:

Copy the style sheet code from step 2 of the Create a CoolBar Demonstration Page section into the <HEAD> section of your DHTML file.
Copy the script code from step 3 of the Create a CoolBar Demonstration Page section into the <HEAD> section of your DHTML file.
Copy the HTML table of controls code from step 4 of the Create a CoolBar Demonstration Page section into the <BODY> section of your DHTML file. To modify the number of buttons in the CoolBar control, add or remove table rows as appropriate.
Modify the Init_Coolbar function to initialize the bars array so that each button appears one time in the array.

For each button, make sure that you set the event handlers as follows:

onmouseover="Cool_MouseOver();" 
onmouseout="Cool_MouseOut();"
onclick="Cool_Click();"

You must add code at the end of Cool_Click function to perform whatever tasks are necessary for the buttons.

back to the top

HOW TO: Create CoolBar Controls in DHTML (315724)

IN THIS TASK

SUMMARY

Requirements

Create a CoolBar Demonstration Page

Verify That It Works

Incorporate the Code into Your DHTML File