Todo lo que hace es ofrecerte algunos controles para una capa con una imagen adentro. Tiene automáticamente un controlador de rollovers y un controlador de eventos para cada uno. Esto no hace nada especial que tu no puedes hacer tu mismo, pero he necesitado un DynLayer-based widget como este para hacer esto, para así poder incorporar adentro de grandes widgets - es un uso primario en el objeto Scroll2 para controlar las fechas cliqueables que mueven el scroll para arriba y para abajo.
Constructor
ButtonImage(x,y,width,height)
Fijando las Imágenes
Se encuentran tres estados - apagado, encendido y dar vueltas (roll), Le dices al objeto los nombres de los ficheros y el directorio con el método setImages():
setImages(imgOff,imgOn,imgRoll,dir)
Aquí hay un ejemplo:
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()
El modo checkbox
Por default la imagen controlara automáticamente las imágenes dando vueltas "rollovers":
mouseover -> roll state
mouseout -> off state
mousedown -> on state
mouseup -> off state, or roll state if any
Pero tal vez querrás utilizar esto como una selección checkbox widget; algo así. Al fijar la propiedad checkbox a verdadero, el ButtonImage se quedará en el estado hasta que sea cliqueado otra vez
mybutton.checkbox = true // ve la demostración si no estas seguro de lo que estoy hablando
Cuando se encuentra en el modo checkbox hay una propiedad bolean, selected, la cual puede ser utilizada para determinar si el botón ha sido seleccionado, o no seleccionado
if (mybutton.selected) alert("yup it's selected")
else alert("nope it's not selected")
Los Eventos
Para cada una de las cuatro acciones del ratón se encuentra un evento en el cual puedes pegar los controladores a:
Si este es un modo de checkbox hay dos mas:
Como por ejemplo para mostrar un dialogo cuando cliqueas en la imagen tienes que hacer:
mybutton.onDown = showDialog
function showDialog() {
alert("you click on it")
}
O una versión mas pequeña será así:
mybutton.onDown = new Function("alert('you clicked on it')")
Ejemplo: buttonimage1.html [fuente] - un ejemplo simple de ButtonImage.
Para el Scroll2 he decidido que por razones del tamaño del fichero para escalar hacia abajo los ButtonImage para que solo controle los eventos del arriba y abajo, no eventos rollovers, no opciones checkbox.
Ejemplo: buttonimage2-mini.html [fuente] - un ejemplo de ButtonImage-mini.
| Casa | Próxima Lección: Radio Buttons |