Foros del Web » Diseño web » HTML »

Botón reset con imagen

Estas en el tema de Botón reset con imagen en el foro de HTML en Foros del Web. Buenas a todos los foreros, mi consulta es la siguiente: ¿como puedo hacer un <input type="RESET" name="Borrar"> pero con una imagen, para limpiar los campos ...
  #1 (permalink)  
Antiguo 25/07/2007, 17:39
Avatar de djmashe  
Fecha de Ingreso: julio-2007
Ubicación: Posadas, Misiones
Mensajes: 49
Antigüedad: 6 años, 9 meses
Puntos: 2
Botón reset con imagen

Buenas a todos los foreros, mi consulta es la siguiente:

  1. ¿como puedo hacer un <input type="RESET" name="Borrar"> pero con una imagen, para limpiar los campos de un formulario?
  2. ¿se puede implementar esto con CSS, para que todos los botones tengan un estilo grafico predeterminado (siempre una imagen)?



Desde ya gracias, y a la espera de una solución.
  #2 (permalink)  
Antiguo 27/07/2007, 16:25
Avatar de Kailu  
Fecha de Ingreso: julio-2007
Ubicación: México D. F.
Mensajes: 89
Antigüedad: 6 años, 9 meses
Puntos: 1
Re: Botón reset con imagen

1- Puedes hacer un botón a partir de una imagen y lo programas con JS.

2- Sí, utilizando estilos puedes asignar una imagen a un botón, por ejemplo:

Código HTML:
<style>
      .boton {background-image:url(tu_imagen.gif); }
</style>

<input type="reset" value="&nbsp;&nbsp;&nbsp;&nbsp;" class="boton" />
<br />
<input type="button" value="OTRO BOTÓN" class="boton" /> 
Con eso tu botón tendría una imagen de fondo y a todos los que les asignes la clase la adoptarían, aunque este ejemplo es muy sencillo pero se puede.

Por cierto los &nbsp; son espacios en blanco, si tu imagen para el botón incluye la descripción de este te recomiendo los uses, si no puedes escribir algo ahí como "Borrar datos".
  #3 (permalink)  
Antiguo 27/07/2007, 16:32
Avatar de Kailu  
Fecha de Ingreso: julio-2007
Ubicación: México D. F.
Mensajes: 89
Antigüedad: 6 años, 9 meses
Puntos: 1
Re: Botón reset con imagen

Por otro lado esto funciona bien con Firefox pero no con IE así es que no te lo recomiendo mucho, aquí te dejo un vínculo tal vez te ayude.

Botones con estilo
  #4 (permalink)  
Antiguo 27/07/2007, 20:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.950
Antigüedad: 12 años
Puntos: 1106
Re: Botón reset con imagen

Hola:

Dentro de un tag button puedes poner una imagen sin problemas (tag img)... y uno de los posibles tipos es justamente reset:
<button type="reset" name="borrar" ><img src="borrar.gif" alt="borrar" /></button>

No entiendo porqué no se usan los botones "como botones" y los inputs se reservan pare entradas...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 03/09/2007, 08:26
 
Fecha de Ingreso: agosto-2007
Mensajes: 3
Antigüedad: 6 años, 8 meses
Puntos: 0
Re: Botón reset con imagen

Hi, una sola pregunta sobre el tema, cuando hago eso aparece un margen fuera o alarrededor de la imagen, como hago para desaparecer esos margenes, prove con la propiedad BORDER de "img" pero no resulto, podrias ayudarme en ello grcias.
  #6 (permalink)  
Antiguo 03/09/2007, 10:24
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.179
Antigüedad: 7 años, 6 meses
Puntos: 120
Re: Botón reset con imagen

Puedes usar CSS

buttton{
border: 0px;
}


Aclaro que cuando usas 0 a diferencia de otros numeros, no es necesario especificar un sistema de medida como px o em, pero siempre es bueno hacerlo.
  #7 (permalink)  
Antiguo 03/09/2007, 10:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.950
Antigüedad: 12 años
Puntos: 1106
Re: Botón reset con imagen

Hola:

Y si no quieres un fondo puedes usar background-color: transparent...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 03/09/2007, 11:12
Avatar de AlZuwaga
Moderador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.554
Antigüedad: 13 años, 2 meses
Puntos: 534
Re: Botón reset con imagen

Hola a todos
Disculpas que me meta en este tema, pero me causó al menos curiosidad la frase de caricatos

Cita:
No entiendo porqué no se usan los botones "como botones" y los inputs se reservan pare entradas...
O es que estoy muy tonto hoy, o hay un juego de palabras detrás de esta, o es simplemente no estoy al nivel necesario como para comprenderlo!

Saludos
__________________
...___...
  #9 (permalink)  
Antiguo 04/09/2007, 04:17
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.950
Antigüedad: 12 años
Puntos: 1106
Re: Botón reset con imagen

Cita:
Iniciado por Al Zuwaga Ver Mensaje
Hola a todos
Disculpas que me meta en este tema, pero me causó al menos curiosidad la frase de caricatos



O es que estoy muy tonto hoy, o hay un juego de palabras detrás de esta, o es simplemente no estoy al nivel necesario como para comprenderlo!

Saludos
Hola:

Había contestado el tema y se fué todo, así que trataré de hecerlo otra vez...

Como botón me refiero al tag button, que significa eso (la taducción literal), y las entradas reservarlas al tag input... la idea es no usar como botones el tag input (aunque sea correcto, no creo que esté semánticamente bien), aunque hay ocasiones especiales que según el botón que pulsemos esperamos distintos comportamientos... en donde se justificaría su uso.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 04/09/2007, 10:13
Avatar de AlZuwaga
Moderador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.554
Antigüedad: 13 años, 2 meses
Puntos: 534
Re: Botón reset con imagen

Ya entiendo! Y resultó que estaba muy tonto ayer ñ_ñ
No me había dado cuenta de esto en tu respuesta:

Código:
<button type="reset" name="borrar" ><img src="borrar.gif" alt="borrar" /></button>
Saludos
__________________
...___...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:30.
SEO by vBSEO 3.3.2