Botones

Rehacer botones es bastante fácil. No hay un código real que va detrás de una imagen de un botón, nada mas tienes que poner un hyperlink alrededor la una imagen y ahí esta. Pero recuerda que en los browsers 4.0 tendrás los eventos onMouseDown y onMouseUp a tu disposición - entonces porque no usar estos para hacer los botones mas interesantes?

Lo que he hecho es crear 2 imágenes para el estado de mi botón:

button0.gif (off)
button1.gif (on)

Y he tenido que precargar las dos imágenes entonces de esta manera podré intercambiarlas:

function preload(imgObj,imgSrc) {
	eval(imgObj+' = new Image()')
	eval(imgObj+'.src = "'+imgSrc+'"')
}
preload('button0','button0.gif')
preload('button1','button1.gif')

Entonces tengo ahí una capa que enseña el boton "off " en una capa llamada "surveyDiv", y los eventos onMouseDown, onMouseUp, y onMouseOut para cambiar la imagen acordadamente, y el submitForm() será una función que recoge y produce el data de una forma "virtual" mía.

<DIV ID="surveyDiv">
<P><A HREF="javascript:submitForm()"
onMouseDown="changeImage('surveyDiv','submitImg','button1')"
onMouseUp="changeImage('surveyDiv','submitImg','button0')"
onMouseOut="changeImage('surveyDiv','submitImg','button0')">
<IMG NAME="submitImg" SRC="button0.gif" WIDTH=68 HEIGHT=20 ALT="Submit" BORDER=0></A>
</DIV>

El onMouseOut es para corregir el mismo problema como se ha visto en la lección Mouse-Click Animación

Yo estoy utilizando mi función changeImage() para intercambiar las imágenes, así que esa función debe estar ahí.

Ver buttons1.html para un ejemplo de un botón.

Casa Próxima Lección: Radio Botones
copyright 1998 Dan Steinman