El sitio más completo sobre programación, recursos web y herramientas online para Webmasters
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>

submit button Imagen javascript Categoría: Javascript, Efectos imagenes

Compartir submit button Imagen javascript en Facebook Twitter MySpace del.icio.us fresqui Meneame


Scripts Similares:

» efecto intercambio de imagenes con javascript
» Mover imagen javascript
» Cambio de imagen a traves de una Lista javascript
» Luminoso javascript
» Precarga de Imagenes con javascript
» Cambio de imagen a traves de una Lista javascript
Ver el perfil de Gabriel Marcelo Rodriguez en LinkedIn

Privacidad ּ Publicidad ּ Prensa ּ Premios ּ Colaborar ּ Enlazarnos ּ Mapa del Sitio ּ Aviso legal ּ Boletín ּ Contacto
2001 - 2011 | Sitio Sitio creado y mantenido por Gabriel Marcelo Rodriguez
Hosting de alta calidad a bajo costo Neolo.com.ar