Glossy.js is one of a collection of scripts written by Christian Effenberger that exploit the power of Javascript, Canvas and vml to create effects previously available only in Flash. In this demo, I use the programmable version of Glossy (cvi_glossy_lib) to generate button-bars.
In this demo, I use the programmable version of Glossy (cvi_glossy_lib.js) to generate the buttons using nothing but clear spacer gifs, and text links for the text of the buttons. Button colors are indicated with the spacer gif's ID, then hover and active effects are generated by glossy.js. Rounded corners and glossy beveled effects are created by the script as well.
All event handlers for mouseover, mousedown, etc. are added once the page loads, and everything about the buttons can be changed on the fly: dimensions, corners, gradient, text, shadows, etc. Not a very sophisticated example, but it will give you an idea of the power of this library.
Ads by Google
Posted by ellen at March 06, 2009 11:08 PM
- Download the latest version of glossy.js from netzgesta.de, open it, find "cvi_glossy_lib.js" and put it into your scripts folder:
http://www.netzgesta.de/index.php
- Add this line to the head of your HTML document:
<script type="text/javascript" language="javascript" src="js/cvi_glossy_lib.js"></script>
Make sure the path points to wherever you have put cvi_glossy_lib.js - Add this script just below it:
<script language="javascript" type="text/javascript">
cvi_glossy.defaultColor2 = '#CC3333';
function addButtons(){
var x = document.getElementsByTagName('DIV');
//
for (var i=0;i<x.length;i++){
if (x[i].className == 'btnHolder'){
cvi_glossy.add(x[i].childNodes[0],{color:'#'+x[i].childNodes[0].id, shadow: 40, shade: 40 });
x[i].onmouseover = function() {cvi_glossy.modify(this.childNodes[0], {color:'#'+this.childNodes[0].id, shadow: 75, shade: 70 });}
x[i].onmouseout = function() {cvi_glossy.modify(this.childNodes[0], {color:'#'+this.childNodes[0].id, shadow: 40, shade: 40 });}
x[i].onmousedown = function() {cvi_glossy.modify(this.childNodes[0], {color:'#'+this.childNodes[0].id, shadow: 90, shade: 80 });}
}} }
</script>
- Add this block of styles just before the closing HEAD tag. You can change the styles to create whatever positioning and font colors and sizes you prefer. I am using relative absolute positioning to make the links fall just where I want them within each button, but you can position them however you prefer.
<style>
body {position:absolute;}
#buttonTable {width:auto;position:relative; }
#buttonTable td { padding:0px; text-align:center;position:relative;}
#buttonTable a{ position:absolute;text-decoration:none;display:block;
top:10px;width:150px;height:40px;font:bolder 12px Arial, Helvetica, sans-serif;color:#FFF;}
#buttonTable .glossy {width:150px;height:40px; }
.btnHolder {position:relative;text-align:center;}
#buttonTable a:hover,#buttonTable a.normal:hover{color:#99FF00;}
#buttonTable a:active{color:#FFCC00;}
#buttonTable .normal {font:normal 11px Arial, Helvetica, sans-serif;color:#FFFCC00;}
</style>
- Within the body of the document, add the table that will contain the buttons:
<table id="buttonTable" cellspacing="0" cellpadding="0">
<tr valign="middle">
<td><div class="btnHolder"><img src="images/spacer.gif" id="FF6633" class="glossy" /><a href="#">Button One</a></div></td>
<td><div class="btnHolder"><img src="images/spacer.gif" id="FFCC00" class="glossy"/><a href="#">Button Two</a></div></td>
<td><div class="btnHolder"><img src="images/spacer.gif" id="339933" class="glossy"/><a href="#" >Button Three</a></div></td>
</tr>
<tr>
<td><div class="btnHolder"><img src="images/spacer.gif" id="6699FF" class="glossy"/><a href="#" >Button Four</a></div></td>
<td><div class="btnHolder"><img src="images/spacer.gif" id="99FF00" class="glossy"/><a href="#" >Button Five</a></div></td>
<td><div class="btnHolder"><img src="images/spacer.gif" id="3333CC" class="glossy"/><a href="#">Button Six</a></div></td></tr>
</table> - Add this line of code just before the closing BODY tag:
<script> addButtons();</script>
- Add the image "spacer.gif" (in my zip file in the images folder) to your images folder, and make sure the path to spacer.gif is correct.
- Change the id's (highlighted in red) on each A tag to the HTML code for the colors you would like the buttons to be.
Your buttons are done!
