Publicidad

10 de marzo de 2009

Como poner una imagen flotante

Como algunos ya sabran este es un tema algo pasado pero lo retomare. En esta ocasion no solo les mostrare como poner la imagen en la web. Podran poner cualquier imagen siempre, pero, por estetica tendra que tener transparencias (ningun fondo).
Lo primero que nesesitaremos es el programa Gimp ya con el programa instalado procederemos a selecionar la imagen que vamos a poner. Ya abierto el programa abrimos la imagen, depues vamos a capa/transparencia/añadir canal alfa

Ya selccionada la opcion nos vamos a Seleccionar/Por color seleccionas el fondo y les das suprimir, repetir esto si tiene varios fondos. Nota: puede causar conflicto si el color de fondo esta en la figura de la imagen.

Te aparecera un fondo a cuadros algo como esto, como ven es la imagen que aparece en la parte inferior izquierda de la pantalla.

Ya que tenemos la imagen como la queremos la guardaremso en formato .PNG es el que acepta transparencias (tambien el .gif), Muy bien ya que tenemos la imagen, la subiremos a ImageShack este nos permite alojamiento gratuito de imagenes. Si no tienes cuenta registrate, luego subimos la imagen y copiamos el link que nos den.
Ahora en el codigo HTML pondrmos lo siguiente:

<img style="display:scroll;
position:fixed; bottom:0px; right:0px;”
src=”URL_de_la_imagen“/>

Esto van en la cabezera, es decir, entre las etiquetas:
<head> </head>

ya ustedes lo modifican a su gusto,
bottom: abajo
top: ariba
right: derecha
left: izquierda
El codigo quedaria algo paresido a esto:

<img style="display:scroll;
position:fixed; bottom:2px; left:2px;”
src=”http://img407.imageshack.us/img407/4956/neoshinbuddymannetbook.png“/>

Ese es el codigo html de mi imagen, y como extra les dejo este sitio para que se descargen Templates para su blog, solo para blogger. estos son faciles de instalar vayanse a diseño y en el codigo html suban el archivo con extencion .xml que se bajaron. Antes que nada hagan una cipia del la plantilla que tienen.

No hay comentarios: