The Dynamic Duo - ButtonImage Object

ButtonImage Object

The ButtonImage object is fairly straight-forward - all it does is give you some nice controls to a layer with an image in it. It has automatic handling of rollovers and handles events for each. This doesn't do anything you can't easily do on your own, but I need DynLayer-based widget like this so that I could incorporate into larger widgets - it's primary use is in the Scroll2 object for handling the clickable arrows for moving the scrollbar up and down.

Constructor

ButtonImage(x,y,width,height)

Setting Images

There's 3 states - off, on, and roll. You tell the object the filenames and directory with the setImages() method:

setImages(imgOff,imgOn,imgRoll,dir)

Here's an example:

mybutton = new ButtonImage(150,200,20,20)
mybutton.setImages('off.gif','on.gif','roll.gif','../images/')
mybutton.build()

writeCSS(mybutton.css)
document.write(mybutton.div)

mybutton.activate()

The checkbox mode

By default the image will handle rollovers automatically:

mouseover -> roll state
mouseout -> off state
mousedown -> on state
mouseup -> off state, or roll state if any

But perhaps you want to use this as a selection widget checkbox sort of thing. By setting the checkbox property to true, the ButtonImage will keep the on state until you click it again.

mybutton.checkbox = true  // see the demo if you're not sure what I mean

When it's in checkbox mode there is a boolean property, selected, that you can use to determine if the button has been selected, or deselected.

if (mybutton.selected) alert("yup it's selected")
else alert("nope it's not selected")

The Events

For each of the 4 mouse actions there is an event that you can attach handlers to:

onDown - when you press the mouse down on it
onUp - when you release the mouse
onOver - when you mouse over
onOut - when you mouse out

If it's in checkbox mode there's 2 more:

onSelect - when you select
onDeselect - when you deselect

For example to show a dialog when you click on the image you could do:

mybutton.onDown = showDialog

function showDialog() {
	alert("you click on it")
}

Or a shortened version of that would be:

mybutton.onDown = new Function("alert('you clicked on it')")

Example: buttonimage1.html [source] - a simple example of the ButtonImage.

Miniature ButtonImage

For the Scroll2 I decided for filesize reasons to scale down the ButtonImage so that it only handles up and down events, no rollovers or rollover events, no checkbox option.

Example: buttonimage2-mini.html [source] - a example of the ButtonImage-mini.

Source Code

buttonimage.js

buttonimage-mini.js