Creando buscadores sólo con imágenes

Hace un tiempo vi un artículo en Trade Show Resources que explicaba como crear un buscador utilizando imágenes de fondo. Me gustó el resultado pero me pareció complejo de implementar.

El problema de sólo usar imágenes en algunos controles de los formularios es que en Internet Explorer se produce un efecto extraño; cuando el texto que ingresamos es demasiado largo, el fondo se desplaza (realiza un scroll). Este ejemplo muestra el error:

Por lo general, para resolver este problema se recurre a hacks pero, no hace falta y hay dos soluciones posibles.

Como lo que queremos es mostrar una imagen en lugar de los controles del navegador, podemos ubicar la imagen en la etiqueta FORM en lugar de colocarla en la etiqueta INPUT:

La otra opción es más sencilla, en lugar de alinear el fondo a la izquierda, como hacemos por defecto, lo alineamos a la derecha y de esa manera, el scroll no lo afecta. Vamos a basarnos en esa solución para continuar agregando los efectos.

La idea es que el formulario de búsqueda sean sólo imágenes, tanto el control donde ingresamos el texto como el botón de envío. Además vamos a hacer que tenga un efecto similar al mouseover, que cuando comencemos a escribir, cambie la imagen y que cuando salimos del control de texto, se restaure la imagen original.

El resultado final sería algo así:

En este caso, necesitaremos tres imágenes:

Fondo 150x46	Botón 60x23	Botón 60x23

Para crear ese efecto, nos vamos a valer de dos eventos (más información):

onfocus="instrucciones" se activa cuando un control recibe el foco (hacemos click adentro)
onblur="instrucciones" se activa cuando un control pierde el foco (hacemos click afuera)

En esos dos eventos, le vamos a decir que, cuando se ejecuten ,"hagan algo", en este caso, que cambien de clase CSS. La sintaxis genérica sería esta:

<input value="" type="text"
  class="elBuscadorBLUR" 
  onfocus="className='elBuscadorFOCUS';" 
  onblur="className='elBuscadorBLUR';"
/>

Por último, para evitar cargar imágenes con la consiguiente demora, vamos a usar una técnica que ya fue explicada en otra entrada y que consiste en usar solo una imagen de fondo y mostrar una mitad, la superior o la inferior aprovechando que la propiedad background nos permite ajustar la posición exacta. La sintaxis de estas propiedades serían estas:

.elBuscadorBLUR {background: transparent url(URL_laImagen) no-repeat right top; height: valorpx;}
.elBuscadorFOCUS {background: transparent url(URL_laImagen) no-repeat right bottom; height: valorpx;}

Este es el el código HTML para el buscador:

<form id="elBuscador" target="_blank" method="get" action="http://miSitio.blogspot.com/search">
<input value="" name="q" type="text" class="elBuscadorBLUR" 
  onfocus="className='elBuscadorFOCUS';" 
  onblur="className='elBuscadorBLUR';" />
<input src="URL_imagenBotonNORMAL" class="elBuscadorENVIO" type="image" 
  onmouseover="this.src='URL_imagenBotonOVER';" 
  onmouseout="this.src='URL_imagenBotonNORMAL';" />
</form>

Y ahora el estilo CSS que agremos antes de </b/skin>:

form#elBuscador { /* el formulario en general */
  height: 23px; /* es igual a la altura de la imagen */
  margin: 0;  /* eliminamos los márgenes por defecto */
  padding: 0;  /* eliminamos los paddings por defecto */
  width: 215px;  /* el ancho total */
}
form#elBuscador input { /* los controles en general */
  border: 0; /* eliminamos el borde de los controles */
  color: #FFFFFF; /* el color del texto */
  float: left; /* nos permite colocarlos uno al lado del otro */
  font-size: 14px; /* el tamaño del texto */
  height: 20px; /* la altura de la imagen menos el padding superior */
  margin: 0;  /* eliminamos los márgenes por defecto */
  padding: 3px 5px 0; /* con esto controlamos la posición del texto */
  width: 140px; /* el ancho de la imagen menos los paddings dercho e izquierdo */
}
.elBuscadorBLUR { /* el fondo normal */
  background: transparent url(URL_search-box-bg.png) no-repeat right top;
}
.elBuscadorFOCUS { /* el fondo activo */
  background: transparent url(URL_search-box-bg.png) no-repeat right bottom;
}
.elBuscadorENVIO { /* el botón de envio */
  padding: 2px 0 0 5px !important;  /* lo alineamos con el control */
  width: 60px !important; /* es igual al ancho de la imagen */
}

REFERENCIAS:

Personalizando los buscadores 1

Personalizando los buscadores 1