Technology Training and Development Services - Northside ISD, San Antonio, TX

Webbie Support
Depressible Buttons

Presented on 23 March 2006

This DHTML script from dynamicdrive.com creates a menubar in which the links are highlighted as "buttons" when the mouse passes over them and then "depressed" when clicked. If an image is used with a link, it becomes black-and-white until the mouse passes over it. No images are needed for the creation of these buttons. The Dynamic Drive page is at: www.dynamicdrive.com/dynamicindex5/depressbutton.htm

These buttons work with Internet Explorer. With other browsers, such as Netscape and Firefox, they appear as simple links within a gray bar.

Two uses for these buttons come to mind, and there are certainly others:

Create a low-profile menu similar what one sees at the top of many applications, like MS Word, Internet Explorer, etc. This could work on a template for teacher pages, or in any other page where a menu is needed that takes up little space, yet looks professional and can be edited easily.
Make a menu quickly for one or more Web pages. You could make up a menu in advance and then edit it when a menu is needed somewhere.

Note:
In these examples, the link text is not underlined. This is because the following <style> was inserted into the <head> of the Web page:

<style>

</style>

Instructions

The process is simple:

Download the file coolbuttons.js. This is a Javascript file. Save it in the same folder as the page where you will create the buttons.

Insert this code into the <HEAD> section of your webpage:

/*
Depressible DHTML buttons (By Erik Arvidsson at http://webfx.eae.net)
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

</script>

A simple button can be created, using the <div> tag and the <span> tags, as shown below. In the <div>, we define the bar for the button at 100 pixels. We use the <span> to set the button width at 100 pixels.

This will produce something like this button:

NISD Home

Examples

Example 1
If we wanted more than one button in a bar, we could add to the code from Step 3, to produce two buttons. Note that the width inside the <div> tag has been widened, and there are two non-breaking spaces (   ) between the two buttons.

<div class="coolBar" style="width:170px" align="center">

<span class="coolButton">
<a href="http://www.nisd.net"><strong>NISD Home</strong></a>
</span>

 
 

<span class="coolButton">
<a href="http://www.nisd.net/schools/calendars/"><strong>Calendars</strong></a>
</span>

</div>

This will produce something like this:

NISD Home Calendars

Example 2
These buttons are easy to use in a table, as well. Note that images were added to all of the buttons. To add images, you must always set a width for each button (this was done by setting the cell widths). You can do pretty much all the work in the Dreamweaver design view: the only critical part is making sure that "coolBar" is chosen as the table class, and that "coolButton" is the class for each cell. Just use one cell per button. Easy, right?

<td width="125" class="coolButton"><div align="center">
<font face="Verdana" size="3">
<strong><a href="http://www.nisd.net/">
<img src="staff.gif" border="0" align="absmiddle">
Staff
</a></strong></font>
</div></td>

<td width="150" class="coolButton"><div align="center">
<font face="Verdana" size="3">
<strong><a href="http://www.nisd.net/">
<img src="calendar.gif" border="0" align="absmiddle">
Calendar
</a></strong></font>
</div></td>

</tr>
</table>

This is, more or less, what this example will produce. Notice that the images are black and white until you mouse over them:

Home

Staff

Calendar

If you want to exactly align the text and icons, you could add the text to the images in Fireworks.