| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - Diseño web - Botones con estilo - 1 - 2 - 3 - 4 - 5 - 6
Botones con estilo (V)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Botones, imágenes y eventos.-
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.
 |
 |
Home - Diseño web - Botones con estilo - 1 - 2 - 3 - 4 - 5 - 6