Content of ClipButton.js:
Using a ClipButton
This component is an easy-to-use multi-state button that uses *only one* image with a number of button states in it (in one column, all the same height).
- Create a variable for the button and initialize it in your onLoad-handler.
- Create a DIV element with a style attribute to position it. Set the clip values to (0,0,0,0) (this makes the button "invisible" until the onLoad-handler has been called and everything is set up. This is also a good way to stop event scripts from screwing up your page if they are triggered before the page has loaded completely.
- Whenever you need to set the button state, use its setState-method, most probably you will do that in the mouse handlers of the button image (see below).
b = new ClipButton("clipbtn1", 50, 25, 8);
<body onload="initOnLoad()" ...>
style="position:absolute; left:40; top:40; clip:rect(0px, 0px, 0px, 0px);
background-color:#00FF00; layer-background-color:navy; visibility: visible;
<a href="#" onmousedown="b.setState(2)"onmouseover="b.setState(1)"
onmouseout="b.setState(0)" onmouseup="b.setState(3)" onfocus="blur()">
<img src="btn2.gif" width="50" height="200" alt="" border="0">
If you're using a ClipButton within another layer, you have to add the nesting
path to the constructor (see ClipButton example).
A bug in Netscape 6 (Bugzilla Bug 35274) makes the ClipButton catch events not only within the currently clipped area, but within its entire area, ie the full size of the included image.