[Actualizado el 11/08/08]
Aprovecho para hacer un “como” sobre esto ya que lo he implementado/mejorado en este blog ahora mismo (expande el post para ver las imágenes que he diseñado y utilizado).
Se que a muchos les gusta el diseño Web, y yo, como cada día aprendo algo y voy haciendo mis pinitos, me gusta compartir este conocimiento mediante licencia creative commons (¡arriba la cultura libre!).
Ahora voy a explicar como poner una imagen (u otro elemento) flotante fija en la esquina de una Web + algunas cosas para que quede “más mejor”:
Imagen Flotante Fija en la Esquina
Para insertar una imagen en código HTML es así:
<img src="URL_de_la_imagen“/>
Para insertar una imagen el la esquina SOLO es necesario poner el siguiente código HTML entre las etiquetas <body> y </body> (por ejemplo –> justo antes de </body>):
<img style="display:scroll;
position:fixed; bottom:0px; right:0px;”
src=”URL_de_la_imagen“/>
Cambia los valores en negrita para personalizar la posición de esta manera:
bottom es la distancia con respecto abajo, por lo que si es 0px estará pegada abajo, lo mismo con right.
Puedes poner top (arriba) en vez de bottom (abajo), y left (izquierda) en vez de right (derecha), cuestión de gustos.
Evidentemente, donde pone URL_de_la_imagen hay que cambiarlo si o si por la dirección URL donde tengas la imagen que quieras poner, por ejemplo, la imagen de arriba tiene esta URL:
http://media.twango.com/m1/original/0092/1860bae92ee74820b5b114310b399942.gif
[11/08/08] NOTA:
Esto funciona con TODOS los exploradores, excepto con Internet Explorer 6 e inferiores (con IE7 si funciona).
Lo mismo pasa con las imágenes en formato PNG con transparencias –> estas últimas no las muestra en IE6 e inferiores.
Hasta aquí es lo básico, a continuación y hasta el final del artículo indicaré cosas para mentes más intrépidas 
Si quieres añadirle el estilo CSS desde la hoja de estilo lo importante es que el elemento tenga lo siguiente:
img_esquina {
display:scroll;
position:fixed;
bottom:0px;
right:0px;
}
De la misma forma que a la imagen, se le puede aplicar este estilo a cualquier elemento mediante:
<div style="display:scroll; position:fixed; bottom:0px; right:0px;”>
Elementos_que_quieras_con_este_estilo
</div>
[11/08/08] NOTA.
Efecto Hover
Se supone que ya sabemos insertar una imagen/elemento para el caso y hacer que esté en su posición fija, ahora explico como hacer que esa imagen cambie cuando le pasas el cursor por encima.
En este caso no hay que aplicar el estilo de forma directa, si no en la hoja de estilos CSS, y no es necesario poner el código de una imagen, pero si el de un enlace (<a href="URL_del_enlace“></a>).
Para aplicar el estilo de forma indirecta se hace redireccionando este al nombre que queramos, por ejemplo img_esquina donde pone class:
<div class="img_esquina“>
<a href=”URL_del_enlace“></a>
</div>
Y luego, en la hoja de estilos CSS (delimitada por las etiquetas <style y
type="text/css"></style>, en blogger entre <b:skin><![CDATA[ y ]]></b:skin>, o en un archivo .css) pegar el siguiente código:
.img_esquina a {
width: 200px;
height: 194px;
background: transparent url(URL_de_la_imagen_1) left top;
display:scroll;
position:fixed;
bottom:0px;
right:0px;
}
.img_esquina a:hover {
width: 200px;
height: 194px;
background: transparent url(URL_de_la_imagen_al_pasar_el_cursor) left top;
display:scroll;
position:fixed;
bottom:0px;
right:0px;
}
Es importante cambiar los valores de width y height por los que tengan cada imagen, y también que estas tengan las mismas dimensiones.
Imagen Aleatória
Estos códigos los he obtenido por cortesía de Wyrm (gracias tío).
El objetivo es que una imagen se cambie por otra cada vez que se refresque la página (cada vez que alguien entre y valla explorando la web).
Para ello, hay que introducir en el lugar que quieras que valla la/s imagen/es el siguiente código:
<script language="JavaScript">
document.write('<img src="' +
item + '">')
</script>
Es decir, si quieres que la imagen aleatoria esté en la esquina introduce este código entre las etiquetas <body> y </body>:
<div style="display:scroll;
position:fixed; bottom:0px; right:0px;”>
<script language=”JavaScript”>
document.write(’<img src=”‘ +
item + ‘”>’)
</script>
</div>
Y luego, entre las etiquetas <head> y </head> lo siguiente:
<!-- img aleatória -->
<script type='text/javascript'>
var numeroitems = 11 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round(
(numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] = “URL_de_la_imagen_1″
items[2] = “URL_de_la_imagen_2″
items[3] = “URL_de_la_imagen_3″
items[4] = “URL_de_la_imagen_4″
items[5] = “URL_de_la_imagen_5″
items[6] = “URL_de_la_imagen_6″
items[7] = “URL_de_la_imagen_7″
items[8] = “URL_de_la_imagen_8″
items[9] = “URL_de_la_imagen_9″
items[10] = “URL_de_la_imagen_10″
items[11] = “URL_de_la_imagen_11″
var item = items[aleatorio]
</script>
<!– fin img aleatória –>
Puedes añadir tantas imágenes como quieras copiando y pegando lo de items[11] uno debajo del anterior y cambiando el número; o borrar los que no vallas a utilizar.
= “URL_de_la_imagen_11″
Es importante que donde pone var numeroitems = 11 ;, cambies ese 11 por el número de imágenes que vallas a utilizar.
Ejemplo
Y sé finí, os pongo como ejemplo el código que he utilizado yo en mi blog para el primer y último caso (podeis utilizarlo para practicar):
Entre las etiquetas <body> y </body> he puesto (en realidad he creado un Widget HTML/Javascript):
<div style="display:scroll; position:fixed; bottom:-1px; right:0px;">
<a
href="http://www.flickr.com/photos/macuoren/2408626664/in/photostream/"
target="_new">
<script language="JavaScript">
document.write('<img src="' +
item + '">')
</script>
</a>
</div>
Y entre las etiquetas <head> y </head> he puesto:
<!-- img aleatória -->
<script type='text/javascript'>
var numeroitems = 10 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round(
(numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] =
“http://media.twango.com/m1/original/0092/1860bae92ee74820b5b114310b399942.gif”
items[2] =
“http://farm2.static.flickr.com/1269/887518968_421100aa52_o.png”
items[3] =
“http://media.twango.com/m1/original/0093/1e8a833eb403497d9fd40fc7f933198a.png”
items[4] =
“http://media.twango.com/m1/original/0172/3111ffdd215941a4bcdada80f6e21197.png”
items[5] =
“http://media.twango.com/m1/original/0172/821c456b93364b41b9257c1399d0a6b3.png”
items[6] =
“http://media.twango.com/m1/original/0172/aece601bc819457eb8fe1a22095bfad7.png”
items[7] =
“http://media.twango.com/m1/original/0172/8122318270b34cd4832e0df1aec8c31a.png”
items[8] =
“http://media.twango.com/m1/original/0172/68761034d00741869df6a1da9a31ea6d.png”
items[9] =
“http://media.twango.com/m1/original/0172/863f382b05c54dabb0dbb336f4cbcf9f.png”
items[10] =
“http://media.twango.com/m1/original/0172/cc6989381d3f41648fd6fec24676efd6.png”
var item = items[aleatorio]
</script>
<!– fin img aleatória –>
Estas son las imágenes que he diseñado y utilizado junto con la de arriba.
Y ya está, no estaría de más un comentario si te ha sido útil (o si te parece interesante) 
[04/08/08] Para evitar tener que poner el código javascript por separado –> Poner Imágenes Aleatorias con HTML.
- Feed/RSS
- Feed/RSS Comentarios
- Recibe actualizaciones por E-Mail
- macuoren
- Miche
- Zepo
- Alicia
Sintesis de Voz (TTS)
Extensiones Firefox
Aplicaciones Online
Aplicaciones Mac
Aplicaciones Güindous
Apps Multiplataforma
App Independencia
Inst. Apps Ubuntu
+
+
+
Apple Mail + Hotmail
+
Thunderbird + Hotmail + GMail
Mejoras Blogger etc.
en 
en 
- Me la suda si me lees
- Libreticas
- Siner Blog
- Aguaqua
- Chexpirit
- Está la cosa muy mala
- El freakaguas otaku
- Café Champú
- Makarras
- La Apatía Uniforme
- PicTurpín
El 13 Abril 2008 a las 1:53
Oeee! Al fin un tontorial imagen esquinera! Voy a ponerlo inmediatamente en práctica
te lo has currado un puñao., gracias!
El 13 Abril 2008 a las 11:10
De nada hombre, gracias a tí por lo de las imágenes aleatorias
El 26 Abril 2008 a las 3:12
mmm demasiado complicado para ser un tutorial no crees?… no me entero apenas d dnd poner cada cosa xD… ni si kiera consigo pasar dl primer apartado
no lo puedes poner 1 poko mas para gente k no sabe?? gracias ^^
Mi Web:
http://es.geocities.com/k2kikod2/1
El 26 Abril 2008 a las 14:09
Si haces una pregunta más concreta seguro que entre todos te la podemos responder.
Si no sabes un poco de HTML o CSS prueba a visitar estos enlaces para ir empapandote.
El 26 Abril 2008 a las 22:44
pos aber… pa ser mas concretos podriais poner el codigo entero? de una pagina en blanco dnd salga en 1 eskina la imagen y nada mas asi es mas facil, xk no e entendido en que parte del codigo pongo
img_esquina {
display:scroll;
position:fixed;
bottom:0px;
right:0px;
}
en otras palabras poner 1 ejemplo de cada 1 de los trucos para que sea mas sencillo de entenderlo ya k yo se html y javascript pero no tengo ni idea de CSS ^^ lo siento por las molestias
El 27 Abril 2008 a las 0:52
xDr4KoSx –> Comprendo lo que dices por que ya he estado en tu situación, así que he cambiado un poco el tutorial para que sea más facilón, al menos la 1ª parte
Eso sí, te recomiendo que te veas los enlaces que te ha pasado Wyrm, hace tiempo fueron los mismos que vi yo y me ayudaron bastante.
El 1 Mayo 2008 a las 0:29
de pm gracias
me mirare los tutos si tengo tiempo 
El 2 Mayo 2008 a las 22:40
hola disculpa cuando pongo la imagen no se queda en un solo lugar no se si me explico al ir bajando la pagina igual lo hace la imagen, la imagen se baja junto con la pagina mmm bueno espero haberme explicaado…. gracias .
El 2 Mayo 2008 a las 23:02
vela –> jajaja… precisamente ese es el objetivo de este tutorial
Si quieres que se quede quieta la imagen aún cuando desplaces la web –> donde pone position:fixed cambia fixed por scroll
El 16 Mayo 2008 a las 0:16
Muchísimas gracias por este tutorial. Muy bien explicado todo. Ya lo he puesto en práctica y todo perfecto, ningún error.
Te añado a mi lista de blogs a seguir.
Saludos desde Kikades
El 20 Mayo 2008 a las 22:08
@Kikus –> se bienvenido pues ^_^
Yo también te he añadido a mi lista de blogs, tiene buena pinta.
El 11 Agosto 2008 a las 19:05
hola, buen tutorial, pero tengo un problema, no me funciona con el IE, lo he probado con el firefox y el opera y quedo muy bien pero con el IE se queda la imagen estatica, alguna solución?. gracias
El 11 Agosto 2008 a las 21:37
Ups, se me olvidó decirlo:
Lo de la imagen en la esquina funciona con TODOS los exploradores, excepto con Internet Explorer 6 e inferiores (con IE7 si funciona).
Lo mismo pasa con las imágenes en formato PNG con transparencias –> estas últimas no las muestra en IE6 e inferiores.
El 25 Agosto 2008 a las 22:21
Hola ¿alguien sabe qué código funciona para iphone? Lo probé en safari en mi compu y funciona, pero en el iphone se queda pegado.
El 25 Agosto 2008 a las 23:12
Si bueno… ahora que lo dices es cierto, yo también he comprobado en un iPod Touch que se queda fijo…
Ni idea de si existe un código válido para ese caso en concreto.
El 11 Diciembre 2008 a las 19:24
ta chebre pero no entiendo el resto
El 12 Diciembre 2008 a las 2:42
Yo tampoco, y de entrepierna.
El 12 Diciembre 2008 a las 2:46
O de entregüevo
El 12 Diciembre 2008 a las 12:32
Oye menos cachondeo.
Estril Faitel! Fait!
El 12 Diciembre 2008 a las 17:09
Hablando de Estril Faitel y de imagenes flotantes
por que no pillas la imagen que e puesto del Paspas Rap
y la pones de imagen flotante diciendo
Comenta estril Faitel
o la que ya te dije :
”Como no comentes te como la oreja”
El 12 Diciembre 2008 a las 21:31
No entiendo ni mierda…
si podrias poner mejor
el codigo completo y asi te agradeceria 1 millon de veces
El 12 Diciembre 2008 a las 21:48
@Anthony di que es lo que no entiendes exactamente a ver si te podemos ayudar.
Al final puse claramente un ejemplo de código y donde colocarlo.
De nada de antebraso
El 14 Mayo 2009 a las 2:06
WOW!!! no puedo creer que hasta el dia de hoy he encontrado esta pagina! Tio eres genial, muchas gracias x los aportes!!!
El 14 Mayo 2009 a las 2:13
Gransias hombre! no hay de que!
El 14 Mayo 2009 a las 15:23
De nada hijo ruddy, hacemos lo que podemos.
El 11 Junio 2009 a las 2:22
nadie conoce algun hack para dejar una imagen estatica en IE 6¿?
El 27 Junio 2009 a las 14:55
excelente men una preguntica si es que tieneesss los cojones para responder como rayos pongo esos iconos en los comentarios ( los de sistema operativo pais y navegador) eres un hacker y chidop tu web asi que responde loco
El 27 Junio 2009 a las 20:25
Hey locooooooooo pos lo de los iconos en los comentarios lo he puesto gransias a este plugin, pero solo se puede utilizar en WordPress, useasé que en blogspot nanain de la china
El 24 Julio 2009 a las 13:05
Hola muy bien explicado, solo quiero una iamgen fija en la esquina del blog, me tira este error: “The value of attribute “src” associated with an element type “null” must not contain the ‘<’ character”
gracias de antemano
El 26 Julio 2009 a las 17:12
Prueba poniendo solo este código:
<img style="display:scroll;position:fixed; bottom:0px; right:0px;”
src=”URL_de_la_imagen“/>
El 28 Julio 2009 a las 18:22
Buenas!!! Muy bueno esto!!! Pero No puedo ponerlo!!!! me tira el mismo error q Facundo!!! y probe de todas maneras y nada… gracias
Oso Gringo
El 27 Agosto 2009 a las 22:33
Me ha funcionado; aunque me dieron, problemas las comillas, por copiar y pegar; pero lo solucioné.
Le puse tambien, un enlace a mi página principal. Y me ha dado algunas ideas más. Le he puesto tambien un width, y así puedo cambiar el tamaño.
Echale un vistazo a mi página:
http://pongo-mi-voz.blogspot.com/
Muchas gracias.
El 31 Agosto 2009 a las 18:40
Hola
Solo comentaré por que me pareció gracioso este mostruo del espagueti (spaghetti), y aquí aplicarás esta técnica pero como padre el div de fondo, no ?
Adiós!
PD por cierto, te pasas con las respuestas a los comentarios
El 31 Agosto 2009 a las 21:11
Que va, no me paso para nada en los comentarios
No se si he entendido tu pregunta, te pego el código CSS que le he puesto a mi cagetín de texto para que salga el MEV:
#commentform textarea {
background-image: url(http://media.share.ovi.com/m1/original/0390/df2e21bd8ed14042af574a30ac522e67.png);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #E4E4E4;
border: 2px solid #999999;
width: 280px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 5px;
}
#commentform textarea:hover {
background-image: url(http://media.share.ovi.com/m1/original/0387/895e568479ef46af9e3df0a51a011ec5.png);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #EFEFEF;
}
El 23 Septiembre 2009 a las 3:39
¡Gracias karnal!
Ahi me tenias buscando por toda la red hasta que me encontre tu página, me has sacado de un lio.
Todos tenian codigos que usaban javascript o mucho html, no crei q la solucion era tan simple.
Una vez más: ¡GRACIAS!
El 23 Septiembre 2009 a las 20:58
De nada hombre, da gustico ser útil ^_^
El 25 Septiembre 2009 a las 14:30
Hola Loren,
A ver si me puedes echar una mano.
Cuando subo o bajo el scroll, el lateral de mi blog tapa mi mascota, hay alguna manera de ponerlo flotante?
Porque veo que tu mascota pasa por encima de todas las secciones y no las “tapa”.
Un saludo.
P.D. El codigo que use fue:
“<a href=’URL/’ rel=”nofollow”>
</a>”
El 26 Septiembre 2009 a las 15:14
Creo que te entiendo, pero deberías pasarte un enlace a tu web para que vea exactamente lo que quieres decir. Y pásate también el código CSS que le hallas puesto a ver si es eso, que lo que me has puesto no dice mucho.
Si te fijas en mi blog no todo está por debajo de la imagen flotante, dependiendo del navegador que utilices la “Nube de Etiquetas”, al ser un scipt o flash o yo que se, hace que esté por encima.
Bueno eso, responde si quieres a ver si te puedo ayudar
El 27 Septiembre 2009 a las 13:47
No quería poner directamente la web por si te parecía Spam.
http://ihatetosaybutitoldyouso.blogspot.com/
En Opera y MSIE 8.0 según el sistema operativo parece que tira por encima pero en Firefox no.
El código que aparece en el mensaje anterior no es que yo utilice, lo han sustituido por el no follow del enlace así que si lo vuelvo a poner probablemente me vuelva a poner lo mismo pero vamos a ver que pasa.
“<a href=’http://ihatetosaybutitoldyouso.blogspot.com/‘ rel=”nofollow”>
</a>”
Por si no sale, un a hrefe con su style, position y demás tags de posición y luego la imagen.
El 27 Septiembre 2009 a las 13:48
Como el que utilizaste tu en “Imagen Flotante Fija en la Esquina” pero con la a href delante para que enlace a la web.
El 27 Septiembre 2009 a las 14:03
He visto el código de tu imagen, es este:
<a href=’http://ihatetosaybutitoldyouso.blogspot.com/‘ style=’display:scroll; position:fixed; bottom:11px; right:5px;’>
<img src=’http://img268.imageshack.us/img268/6953/biglebowski.png‘/></a>
¿Has probado a ponerle el estilo en la etiqueta de imagen (img src) en vez de la de enlace (a href)?
El 27 Septiembre 2009 a las 16:25
Poniéndolo así, no?:
No funciona tampoco, incluso lo he metido como un widget y no como parte de la plantilla y nada
El 27 Septiembre 2009 a las 16:54
No puedo ver como lo has puesto, prueba con este:
<a href=’http://ihatetosaybutitoldyouso.blogspot.com/‘>
<img src=’http://img268.imageshack.us/img268/6953/biglebowski.png‘ style=’display:scroll; position:fixed; bottom:11px; right:5px;’/></a>
El 27 Septiembre 2009 a las 18:38
Así era como lo había puesto sólo que con las propiedades antes de la url de la imagen y nada, de ninguna de las 2 formas.
El 27 Septiembre 2009 a las 18:57
Pues lo único que se me ocurre es que le pongas un atributo de profundidad “z-index”, he visto el código fuente de tu página y hay 2 elementos que lo tienen, uno de ellos con un 3, prueba poniéndole a esto un 5 (z-index:5), 1º en la imagen y si sigue igual en el enlace. Por ejemplo:
<a href=”http://ihatetosaybutitoldyouso.blogspot.com/”>
<img src=”http://img268.imageshack.us/img268/6953/biglebowski.png” style=”display:scroll; position:fixed; bottom:11px; right:5px;z-index:5;”/></a>
El 28 Septiembre 2009 a las 0:12
Me dice:
“Open quote is expected for attribute “{1}” associated with an element type “href”"
Si he asociado el atributo tanto a la imagen como al href..
No se, se me escapa de las manos.
El 28 Septiembre 2009 a las 2:16
Después de darle muchas vueltas, y que no podía ser tan difícil, he utilizado el codigo que tenía al principio.
Lo que pasaba debía de ser es alguna incompatibilidad con otro codigo y con no poner el de la imagen el último antes del fin del body parece que funciona perfectamente.
Gracias de todas formas.
El 28 Septiembre 2009 a las 15:26
El anónimo anterior era yo^^
El 28 Septiembre 2009 a las 17:34
Bueno pero veo que ya lo tienes solucionado, c’est fini pues, mu bien ^_^
El 27 Octubre 2009 a las 20:43
olass a todos.. solo queria opinar que por mas vueltas que le doy no me va, digamos que no lo quiero colocar en un blog sino en una pagina de puro html y css, pero no me aparece na de na.. ni en firefox ni en explorer.. mi pregunta es dentro de body en que parte se colocaria porque es posible que sea ese mi unico error
El 27 Octubre 2009 a las 20:43
por cierto muy bueno el blog y el aporte
El 28 Octubre 2009 a las 14:52
Debes ponerlo antes de
</body>, si es justo antes no te equivocasEl 5 Noviembre 2009 a las 20:50
hiee porque nop puedoo participarrr
El 5 Noviembre 2009 a las 21:13
hola..
primeramente agradecerte mucho…
Busque el codigo por mucho tiempo y al fin lo encontre, pero tengo un problema, esque lo puse en mi sitio, me sale la imagen pero en la parte de abajo y no es fija,eso me pasa cuando lo veo en el IE7 pero cuando lo veo en el firefox me sale exelente, quisiera que revisaras mi codigo, asi para ver en que falla, yo creo que talves choca con otro codigo…
te agradecere mucho si me ayudaras…
el sitio donde lo estoy probando es este
El 6 Noviembre 2009 a las 1:48
Si no pones un enlace a tu web va a ser difícil
El 17 Diciembre 2009 a las 18:54
Hola estube colocando el código de la imagen fija y flotante en la esquina, tal y como lo indicaste y nada¡¡salia un letrero horroroso de color rojo en la plantilla al hacer vista previa, pero usando un poco de lógica y después de mirar varias veces que hacía mal y utilizando el famoso sistema de los 7 errores (que seguro haz algún día hecho en algún librito de entretenimiento) descubrí el error.
Eran las comillas, así que copié y pegué y luego borré comillas y las puse nuevamente escribiendolas desde el teclado y oh sorpresa cuando vi vista previa. Me encantó la imagen flotante, me quedo buenísima. Ahora, vendré seguido a ver que más puedo hacer. Gracias por compartir.
El 17 Diciembre 2009 a las 20:56
Me alegra que te haya servido