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 |