5.3 ClipButton

  Download source    View color-coded source    Launch example

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).

Make sure to include ObjLyr (ObjLyr.js)

Simple usage example
  • 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).

var b;
function initOnLoad() {
  b = new ClipButton("clipbtn1", 50, 25, 8);

<body onload="initOnLoad()" ...>
<div id="clipbtn1"
 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">

Nested layers
If you're using a ClipButton within another layer, you have to add the nesting path to the constructor (see ClipButton example).

Known Issues
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.


function ClipButton(layerName, width, height, states, nestedRef)
Constructs a new ClipButton.

    String layerName - the id of the layer which contains the button image
    int width - the width of *one* button, not the whole image
    int height - the height of *one* button, not the whole image
    int states - the number of states for that button, ie the number of rows in the button image.
    String [nestedRef] - path to a nested layer
    ClipButton - a new ClipButton object using the layer lyrName

function getState()
Returns the current state.

    The current state

function setState(n)
Sets the current state, if n is a valid button state
(Although you'll probably use integer values for making buttons switch etc., you can also use float values for animations or button state transisitions)

    n - the new state number

function toString()
Returns a string of the format
Clipbutton <layer name> = <x>, <y>
state = <current state>/<total number of states>

    String - a string representation of the ClipButton