Microsoft KB Archive/315724

= HOW TO: Create CoolBar Controls in DHTML =

Article ID: 315724

Article Last Modified on 5/12/2003

-

APPLIES TO


 * Microsoft Internet Explorer 5.0
 * Microsoft Internet Explorer 5.5

-



This article was previously published under Q315724



IN THIS TASK
SUMMARY
 * Requirements
 * Create a CoolBar Demonstration Page
 * Verify That It Works
 * Incorporate the Code into Your DHTML File



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:    .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; }    Add the following script to the HTML file: 

  </li>  Add the following HTML controls to the HTML file: <BODY OnLoad=&quot;InitCoolbar;&quot;> <FORM NAME=thisForm METHOD=POST>

</FORM> </BODY> </HTML> </li> Save the HTML file as CoolBarDemo.htm.</li></ol>

back to the top

Verify That It Works

 * 1) Start Internet Explorer, and then open the CoolBarDemo.htm file. Notice that the HTML file displays a CoolBar control that contains three buttons.
 * 2) Move the pointer over each button. Notice that the buttons change color from cornflower blue to dim gray.
 * 3) 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: <ol> Copy the style sheet code from step 2 of the Create a CoolBar Demonstration Page section into the  section of your DHTML file.</li> Copy the script code from step 3 of the Create a CoolBar Demonstration Page section into the  section of your DHTML file.</li> 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.</li> Modify the Init_Coolbar function to initialize the bars array so that each button appears one time in the array.</li>  For each button, make sure that you set the event handlers as follows: onmouseover=&quot;Cool_MouseOver;&quot; onmouseout=&quot;Cool_MouseOut;&quot; onclick=&quot;Cool_Click;&quot; </li> You must add code at the end of Cool_Click function to perform whatever tasks are necessary for the buttons.</li></ol>

back to the top

Keywords: kbhowto kbhowtomaster KB315724

-

[mailto:TECHNET@MICROSOFT.COM Send feedback to Microsoft]

© Microsoft Corporation. All rights reserved.