/* * ClipButton * Version 1.0, 20/11/2001 * * Copyright (c) 2001 by Netzministerium.de * Written by René Sander. * Distributed under the terms of the GNU Lesser General Public. (See licence.txt for details) */ /* Make sure to include ObjLyr (ObjLyr.js) 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). SIMPLE USAGE EXAMPLE: 1. Create a variable for the button and initialize it in your onLoad-handler 2. 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. 3. 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). JAVASCRIPT: 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> ... KNOWN ISSUES: A bug in Netscape 6 (http://bugzilla.mozilla.org/show_bug.cgi?id=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. NOTE: If you're using a ClipButton within another layer, you have to add the nesting path to the constructor (see ClipButton example). */ /* * ClipButton * 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 ClipButton(layerName, width, height, states, nestedRef) { // gets reference to ClipButton layer this.lyr = new LyrObj(layerName, nestedRef); // sets object variables this.x = this.lyr.getPos("left"); this.y = this.lyr.getPos("top"); this.width = width; this.height = height; this.states = states; this.state = -1; // assigns object methods this.getState = ClipButtonGetState; this.setState = ClipButtonSetState; this.toString = ClipButtonToString; return this; } /* * ClipButton.getState * Returns the current state * * Returns * The current state */ function ClipButtonGetState() { return this.state; } /* * ClipButton.setState * 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 ClipButtonSetState(n) { // checks boundaries if ( (n < this.states) && (n >= 0) ) { this.state = n; ay = this.state * this.height; // adjusts the layer's clip rect this.lyr.setClip(0, ay, this.width, ay + this.height); // repositions the layer to have the visible area unchanged // after changing the clipping this.lyr.setPos("top", this.y - ay); } } /* * ClipButton.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 * */ function ClipButtonToString() { return "ClipButton '" + this.lyr.lyrname + "'\nx = " + this.x + ", y = " + this.y + "\n" + "state = " + this.state + "/" + this.states; }