5.3 ClipButton
|
|
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);
b.setState(0);
}
HTML
<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;
z-index:1">
<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">
</a>
</div>
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.
ClipButton
|
function ClipButton(layerName, width, height, states, nestedRef)Constructs a new ClipButton. Parameters 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 Returns ClipButton - a new ClipButton object using the layer lyrName function getState()
Returns the current state. Returns 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) Parameters 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> Returns String - a string representation of the ClipButton |