Con este sencillo JavaScript se puede reeemplazar el tipico button gris, por cualquier imagen, con esto se puede lograr un efecto estetico distinto. Aqui empiezo a explicar como funciona el siguiente javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<html> <head> <title>Submit Button Imagen</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script> /******************************************************************************* Rutina JavaScript que reemplaza el botón común, por una imagen Con este sencillo JavaScript se puede reeemplazar el típico botón gris, por cualquier imagen, con esto se puede lograr un efecto estético distinto. Aquí empiezo a explicar como funciona el siguiente Script ##### ##### ##### ##### ##### ##### ##### ##### ##### ##### ##### ##### #### 1) Debes darle un nombre al formulario: Ejemplo: <form name="Gaby"> '' </form> 2) Reemplazar el usual Botón (<input>) de enviar por lo siguiente Ejemplo: <form name="Gaby"> '' <a href="javascript:document.Gaby.submit()"><img src="boton.gif"></a> </form> Para usar el botón borrar con una imagen, debes poner en vez de .submit() esto: <form name="Gaby"><a href="javascript:document.Gaby.reset()"> <img src="boton.gif"></a> No olvides! mirar el ejemplo de abajo Gabriel Marcelo Rodríguez - GAMAROD JAVASCRIPT http://www.gamarod.com.ar - e-mail: webmaster@gamarod.com.ar */ </script> </head> <body bgcolor="#FFFFFF"> <div align="center"><font size="5"><b>Image Submit Button<br> <br> </b></font> <form method="post" action="" name="gaby"> <p><br> </p> <table width="28%" border="0" cellspacing="0" cellpadding="0" height="113"> <tr> <td height="123"> <p align="center">Nombre: <input type="text" name="nombre" size="20"> <br> E - mail : <input type="text" name="email" size="20"> <br> </p> <table width="79%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td> <div align="right"> <!-- Enviar --> <a href="javascript:document.gaby.submit()" onmouseover="window.status='Enviar';return true"; onmouseout="window.status='';return true";><img src="ejemplos/bot_enviar.gif" width="54" height="22" border="0"></a> <!-- Borrar --> <a href="javascript:document.gaby.reset()" onmouseover="window.status='Borrar';return true"; onmouseout="window.status='';return true";><img src="ejemplos/bot_borrar.gif" width="54" height="22" border="0"> </a></div> </td> </tr> </table> <p align="center"> </p> </td> </tr> </table> <p><br> <br> </p> </form> </div> </body> </html> |