Entradas con la etiqueta ‘HTML’

Técnica CSS sprite sin background

Jueves, 6 de Agosto de 2009

Sprite es una técnica que nos permite agrupar muchas imágenes bajo una misma, y luego separarlas mediante CSS. Con dicha técnica conseguimos aligerar el peso de la página web y las peticiones que realizamos.

Hasta ahora utilizábamos las propiedades background-image y bakground-position colocando la imagen como fondo de un contenedor. Con este método se consiguen efectos muy logrados de substitución de imágenes sin precarga javascript, para hovers en los links de un menú, por ejemplo.

Nosotros hemos querido ir mas allá y tener una imagen con todos los elementos gráficos de la página web (hover, cabeceras, logos, bordes redondeados de tablas, etc... ) y 'recortar' parcialmente dicha imagen para mostrar sólo una parte dentro de la página. El tiempo de carga utilizando esta técnica se reduce drásticamente. La suma de las imágenes por separado daría un tamaño mayor que el de la imagen agrupándolas todas y, sobretodo, el realizar una sola petición para descargar todo el contenido gráfico de la web reduce muchísimo dicho tiempo.

Vamos a utilizar esta imagen:

Programación web

Control+Z Web technology

Para mostrar el efecto, vamos a suponer que necesitamos utilizar por separado el logo por un lado y el teléfono y el mail por otro. Aquí está el código:

CSS:
  1. body{font-family: verdana,arial,helvetica,sans-serif;font-size:.8em;color:#5f5f5f;margin:50px;}
  2. p{margin-top:50px;}
  3. /*Estilos genericos del sprite*/
  4. .sprite{ display:block;overflow:hidden;position: relative; }
  5. .spriteImg{ position: absoluteborder:none; }
  6.  
  7. /*Medidas y coordenadas especificas del elemento 1*/
  8. .logoContenedor { width: 305px; height: 95px; }
  9. .logoImg { top:-5px;left:-50px;}
  10.  
  11. /*Rollhover*/
  12. /*a.logoContenedor:hover .logoImg{top:-10px;left:-50px;}*/
  13.  
  14. /*Medidas y coordenadas especificas del elemento 2*/
  15. .infoContenedor { width: 200px; height: 50px; }
  16. .infoImg { top:-95px;left:-100px;}

HTML:
  1. Aquí necesito un enlace con el logo:
  2.  
  3. <a class="sprite logoContenedor" href="http://www.controlzeta.net">
  4. <img class="spriteImg logoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  5. </a>
  6.  
  7. Aquí usaremos el teléfono y el email:
  8.  
  9. <a class="sprite infoContenedor" href="http://www.controlzeta.net">
  10. <img class="spriteImg infoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  11. </a>

El ejemplo (y por tanto el código) lo tenéis aquí: http://controlzeta.net/Tutoriales/Sprite/sin-background.php

La explicación técnica es simple.

Necesitamos un contenedor para cada imagen (en este caso un <a> con display:block, podría ser un div u otra elemento) que nos delimite las medidas que tendrá el recorte de la imagen mostrada. Este contenedor debe tener la propiedad "overflow:hidden;" para que no se nos muestre el trozo de imagen que no queremos ver.

Dentro del contendor, insertamos el tag <img> con el src la imagen en cuestión y, importante, las medidas completas de la imagen original. Si no las introducimos, se nos escalará la imagen para adaptarse al contenedor. Además, debemos posicionar la imagen con los atributos css top y left, para "empezar" a mostrar la imagen desde la coordenada que nos interese.

Llevamos tiempo utilizando esta técnica pero en la variante background-image. En algunas ocasiones la hemos usado para reducir el tiempo de carga, pero implicaba problemas semánticos (un logo nunca puede ser una imagen de fondo) y de posicionamiento (una imagen de fondo no puede tener alt o title). Esta nueva técnica solventa los problemas mencionados, por lo que podremos extender el concepto a toda la web, consiguiendo agrupar tantas imágenes como queramos.

Fuente: google.com No porque lo hayamos buscado, que también, sino porque, si os fijáis, google utiliza esta imagen:

google.com

google.com

Curioso, ¿no?

ThickBox: Ventanas flotantes

Viernes, 3 de Julio de 2009

ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador.

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • jquery.js: Librería necesaria para el funcionamiento e thickbox.
  • thickbox.js: Funciones thickbox para abrir las ventanas.
  • thickbox.css: Hoja de estilos para la ventana emergente.
  • loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente

Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <link rel="stylesheet" href="thickbox.css" type="text/css" />

Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:

  1. <a href="flash9.gif" class="thickbox" title="Ejemplo ThickBox">

Donde se tiene que class="thickbox" es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.

Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de Google.

  1. <a
    
  2. href="http://www.google.com?TB_iframe=true&height=420&width=600"
  3. title="Google"
  4. class="thickbox">Google</a>

Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.

como poner una imagen como botón de submit de un formulario html sin javascript

Viernes, 29 de Agosto de 2008

Para poner una imagen como botón en un formulario, tan solo será necesario definir un tag html "input" con propiedad "type" como "image". Así no será necesario usar javascript, y será estandard para todos los navegadores. Este deberá estar dentro de la estructura html del formulario y automáticamente enviará el formulario html pulsando sobre el o aciendo intro en cualquier caja del formulario.

ejemplo:

HTML:
  1. <form action="urldestino.php"> <!-- caja de texto-->
  2.  
  3. <input name="cajaTexto" type="text" />
  4. <!-- caja de texto-->
  5. <!-- botón de submit con imagen -->
  6.  
  7. <input title="boton comprar" alt=" conton comprar " src="rutaImagen/Imagen-boton-Submit.jpg" type="image" />
  8.  
  9. </form>

Este sistema es el mejor sistema para poner un boton con imagen en un submit de formulario. Aunque el tipo del input no sea submit, el tipo "image" tambien envia los datos del formulario a la url de action.

Este sistema hace mas usables las páginas, porque despues el javascript si no lo pones correctamente provoca que te vayas a explorer o a firefox y no funcione el envio del formulario. Además de que con el javascript, cuando haces intro en una caja de formulario no se enviará a no ser que haya un input type image o input type submit.


Odio las paginas que hacen esto mismo con una imagen y un javascript en el elemento onClick que ejecuta el evento Submit() del formulario.