JMiur [E]

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 150x46Botón 60x23Botó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
  • 17 comentarios:

    Vertigo  

    Genial, además es algo que llevaba tiempo buscando... nada ahora a ponerlo en práctica.

    gracias

    Responder
    Marcos Cousseau  

    Espectacular! que bueno que esta! hace tiempo buscaba ponerle un rollover a la imagen de buscar!:D

    buenisimo! me vino al pelo!
    gracias JMiur

    Responder
    Marcos Cousseau  

    Agregado!

    pero...no hay alguna manera de que busque en la misma ventana?

    Responder
    JMiur  

    Marcos:
    Si lo que quieres es que no se abra una ventana o una pestaña nueva, elimina target="_blank" de la etiqueta FORM.

    Responder
    Marcos Cousseau  

    Buenisimo! gracias!;)

    Responder
    Marcos Cousseau  

    tengo una duda desde hace tiempo...

    ¿es posible que los resultados que muestre el buscador sean los títulos de los posts?...es decir, parecido al buscador que se le puede agregar desde blogger draft, pero que no use el motor de busqueda de Google, sino el buscador interno del blog...

    y sino se puede, estaría bueno el buscador que tenes vos pero con cosas de este (como las 3 imágenes)...

    otra cosa...como haces para cambiar los colores de los resultados del buscador Google?

    podrías armar algun tuto?:D(si es que no armaste uno ya...por que busque y no encontre)

    (no digo ahora, sino cuando no tengas nada que postear...:D :D )

    bueno! nos vemos JMiur
    espero que entiendas que me intención no es molestarte ;)
    es que soy nuevo en este fantástico mundo de los Blogs y me estoy enviciando :D:D:D

    Responder
    JMiur  

    No, las preguntas no molestan aslavo que aveces, no tienen respuesta :D

    Este es el caso, la verdad, no sabría que contestarte. En principio, el buscador interno no podría usarse y la página de resultados tampoco ya que estamos usando el mismo Google; no tenemos forma de acceder a eso.

    Eso si, podría utilziarse un hack para mostrar las páginas de listas del blog con los posts contraidos. Eso puede verse en este post de Gem@ por ejemplo.

    Responder
    Marcos Cousseau  

    me lees la mente JMiur!!

    justo tambien estaba buscando eso!..queria hacer una especie de "indice" como el tuyo..pero que sea automatico...que se vallan agregando automaticamente los posts...

    gracias!

    Responder
    JMiur  

    Me alegro que sirviera, Marcos :D

    Responder
    Lucas  

    mucha teoria
    poco para ignorantes
    quiero decir, necesito paso por paso, no puedo pensar.
    focus, blur la teoria la entiendo, pero que partes del
    codigo html completo tendria que cambiar para usar las tres imagenes?
    que hay que agregar? ya no me importa saber lo que hago.
    yo copio lo de abajo de:
    "Este es el el código HTML para el buscador"
    lo pego en la sidebar ¿? me bloqueo segundo a segundo. muero.

    Responder
    JMiur  

    Eso no tiene respuesta. Si no se sabe lo que se hace, mejor no hacerlo.

    Responder
    skeletonjack  

    hola, me funciona perfecto, pero no busca nada, lo direccione a mi web y me da error, cree una pagina con el google search y la añadi a mi web pero lo direccion me quedaria http://www.miweb/buscador.html/search y no sale nada.

    Gracias por adelantado

    Responder
    JMiur  

    No sé en que blog lo estás probando.

    Responder
    skeletonjack  

    No es un blog, es una web

    Responder
    JMiur  

    Sea lo que sea no has colocado un enlace a tu ejemplo.

    Si no es un blog, ¿en que lenguaje está escrito? ¿tiene una base de datos? ¿existe un directorio search y una página con el código del buscador?

    El atributo action ejecuta algo en alguna parte, no es alo abstracto, si el sitio no posee un sistema de búsquedas internas, el resultado es nulo.

    Responder
    skeletonjack  

    Perdon por demorarme en contestar, la web esta escrita con html y php y el motor de busqueda con php y javascript

    Responder
    JMiur  

    El aspecto gráfico del buscador, en nada influye; todo depende de lo que se ejecute en el atributo action o en el evento onclick en caso de combinarse JavaScript con PHP que es lo más usual.

    Si el resultado es nulo depende de eso y no de lo gráfico.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR