Depressible DHTML buttons IE

Description: Use this visual DHTML script to transform regular text/ image into depressible buttons! The effect can be applied to any "containment" tag, such as <span>, <div>, <td> etc. Easy to install and degrades well with all other browsers. Buttonize your page elements today!

Demo:

- Plain HTML table:

PackerLand PC What's New What's Hot Services

- HTML table with images (Note how each image appears dull before the mouse is over it):

PackerLand PC What's New What's Hot Services

 

Step 1: Insert the following code into the <head> section of your page:

[FrontPage Save Results Component]


Step 2: Download the below file, and upload it into your webpage directory. Be sure to change the src property in the code above to correctly point to where this file is on your server:

coolbuttons.js (download by clicking it, or clicking it with the shift key depressed in NS)

Step 3: Ok, you're now formally ready to buttonize any display element on your page! The recommended element to use is the TABLE, along with TABLE cells to render each individual button. Simply assign the table a class of "coolBar", and each cell, a class of "coolButton":

Example 1 (Using table):

<table class="coolBar">
<tr>
<td class="coolButton">
<font face="Verdana" size="2"><b>PackerLand PC</b></font>
</td>
<td class="coolButton">
<font face="Verdana" size="2"><b>What's New</b></font>
</td>
</tr>
</table>

PackerLandPC.com What's New

Example 2 (using div and span, with URL enabled):

<div class="coolBar" style="width:100px">
<span class="coolButton" style="width:100px" onClick="window.location='http://packerlandpc.com'"><img src="home.gif"> <b>Back Home</b></span>
</div>

Back Home

Note that when used with <span>, the width attribute MUST be defined, like above. To make the button clickable, we use the onClick event handler inside the button. Alternately, could also use the <a> tag directly inside the HTML for each button, in which the resulting link is clickable in all browsers (and not just IE 4+).

 

 

Packerland PC What's New

Back to Top