Fecha: 25/01/2003
submit button Imagen javascript
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
Código Javascript
<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> 
Categoría: 
