DesarrolloWeb.com > Manuales > Botones con estilo

Botones, imágenes y eventos

09 de septiembre de 2002

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (2)

Para que los botones de imagen no ignoren los eventos de teclado, vamos a utilizar una función Javascript.

Por Luciano Moreno

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Según lo visto hasta ahora, el botón más compatible es el formado por una imagen simple, al verse igual en todos los navegadores. Sin embargo, teníamos el problema de que este tipo de botón ignora los eventos de teclado, por lo que no envía los datos al pulsar el usuario la tecla Enter.

Una solución a este problema es capturar dicho evento, es decir, la pulsación del usuario de la tecla Enter, ya que si lo conseguimos podremos llamar a una función JavaScript que nos envíe el formulario. El código necesario para ello es el que sigue, donde podemos apreciar que Internet Explorer y Netscape Navigator tienen una forma diferente de capturar los eventos, y que usamos el identificador de tecla 13, que es el que corresponde a Enter (podemos usar la tecla o teclas que necesitemos):

<html>
<head>
<title>HTMLWeb. WebScript. Diseño. Botones con estilo.</title>
<style type="text/css">
    .enlace{cursor:default;}
</style>
<script language="JavaScript" type="text/javascript">
    /**
    * funcion demo del evento onclick en la tabla
    */
    function envia()
    {
      document.forms[0].submit();
    }
    /**
    * funcion de captura de pulsación de tecla en Internet Explorer
    */
    var tecla;
    function capturaTecla(e)
    {
        if(document.all)
            tecla=event.keyCode;
        else
        {
            tecla=e.which;
        }
     if(tecla==13)
        {
            document.forms[0].submit();
        }
    }
    document.onkeydown = capturaTecla;
</script>
</head>
<body>
<div align="center">
<form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
    <input type="text" name="prueba">
</form>
<a class="enlace" href="#" onclick="document.forms.form1.submit();return false"><img src="images/boton.gif" width="85" height="24" border="0" alt="enviar"></a>
</div>
</body>
</html>

Cuyo resultado es el siguiente:

Con esto hemos conseguido el objetivo buscado: un botón cross-browser (compatible con los diferentes navegadores), que además soporte los eventos característicos de este tipo de elementos de formulario.

El inconveniente es que los textos que aparecen en la imagen deben ser fijos, salvo que definamos diferentes imágenes para los posibles casos. En caso de páginas que deban soportar multi-idioma, esto se convierte en un obstáculo importante. Vamos a ver cómo podemos hayar una solución a esto.

Descargar los códigos e imágenes