Poner Imagen Flotante Fija en la Esquina de una Web + Aleatoria + Efecto Hover
[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.
89 comentarios »
RSS feed for comments on this post. TrackBack URL
Aplicaciones Online
+
+
Oeee! Al fin un tontorial imagen esquinera! Voy a ponerlo inmediatamente en práctica
te lo has currado un puñao., gracias!
De nada hombre, gracias a tí por lo de las imágenes aleatorias
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
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.
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
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.
de pm gracias
me mirare los tutos si tengo tiempo
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 .
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
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
@Kikus –> se bienvenido pues ^_^
Yo también te he añadido a mi lista de blogs, tiene buena pinta.
[...] [12/04/08] Poner Imagen Flotante Fija en la Esquina de una Web + Aleatoria + Efecto Hover). [...]
[...] es parecido a lo que expliqué en la última parte del post Poner Imagen Flotante Fija en la Esquina de una Web + Aleatoria + Efecto Hover, pero sin necesidad de añadir códigos en el [...]
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
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.
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.
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.
ta chebre pero no entiendo el resto
Yo tampoco, y de entrepierna.
O de entregüevo
Oye menos cachondeo.
Estril Faitel! Fait!
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”
No entiendo ni mierda…
si podrias poner mejor
el codigo completo y asi te agradeceria 1 millon de veces
@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
[...] HOYGAN! - Definición y comentario del ejemplo [...]
WOW!!! no puedo creer que hasta el dia de hoy he encontrado esta pagina! Tio eres genial, muchas gracias x los aportes!!!
Gransias hombre! no hay de que!
De nada hijo ruddy, hacemos lo que podemos.
nadie conoce algun hack para dejar una imagen estatica en IE 6¿?
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
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
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
Prueba poniendo solo este código:
<img style="display:scroll;position:fixed; bottom:0px; right:0px;”
src=”URL_de_la_imagen“/>
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
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.
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
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;
}
¡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!
De nada hombre, da gustico ser útil ^_^
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>”
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
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.
Como el que utilizaste tu en “Imagen Flotante Fija en la Esquina” pero con la a href delante para que enlace a la web.
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)?
Poniéndolo así, no?:
No funciona tampoco, incluso lo he metido como un widget y no como parte de la plantilla y nada
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>
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.
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>
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.
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 anónimo anterior era yo^^
Bueno pero veo que ya lo tienes solucionado, c’est fini pues, mu bien ^_^
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
por cierto muy bueno el blog y el aporte
Debes ponerlo antes de
</body>, si es justo antes no te equivocashiee porque nop puedoo participarrr
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
Si no pones un enlace a tu web va a ser difícil
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.
Me alegra que te haya servido
Chido, me latió tu post y sí me fue de utilidad, gracias carnal!!!
Excelente bro, lo que andaba buscando.
exelente muxas grax
que tal macouren
exelente tu post la verdad
pero empiezo a pensar que ami no me sirve!
lo que quiero hacer es poner la imagen el la esquina superior derecha en mi sitio, este esta echo en flash y montado en un html me gustaria que la imagen apareciera por encima del objeto en swf.
te agradeceria qe me comentaras si en realidad se puede hacer esto o estoy perdiendo mi tiempo
gracias
saludos
exente tu blog
@dildy: Lo que pasa con algunos objetos como flash y scipts, en determinados navegadores, es que se ponen “por encima” de todo lo demás. Así que depende del navegador que uses se te verá por encima o por debajo.
acabas de tu web pusiste al pelado en la esquina inferior
ta bueno ese pulpo
una pregunta como ¿donde pego el codigo mpara la imagen en la esquina? y otra pregunta ¿puedo usar ese código en mi web de .es.tl
de paginawebgratis?
BIEEN BRO!! GRACIAS POR LOS CÓDIGOS!!
si pudieras facilitar un link de donde podamos sacar las figuritas estas seria lo maximo porfavor? gracias
De nadarl
¿Que figuritas? Si te refieres a los dibujos que he utilizado lo hice yo mismo junto con algunos que busqué por google imágenes.
Buena solución
Genial, buena explicación y fácil de entender y aplicar. Gracias
ESTA BUENPO PERO UNO PARA HACER DESAPARECER LA IMAGEN SI NO ES MUCHO PEDIR
¿qué pasa con las imágenes flotantes si cambio la resolución de pantalla?
Eso solo importa si lo que has utilizado (por ejemplo) son los parámetros “top” (arriba) y “left” (izquierda) e indicando los pixeles para una resolución en concreto para poner la imagen abajo a la derecha (”bottom” y “right”). En este ejemplo usaría los parámetros “bottom” y “right” indicando como valores 0px.
Si lo que quieres es alinear los botones que tienes en tu web que enlazas en tu nombre con los bordes verticales se hace de otra manera, y ahí no puedo ayudarte porque no se como se hace.
He buscado un poco de información y he encontrado esto, quizás te sirva de algo: http://www.ignside.net/man/css/posicionamiento.php
GRACIAS POR EL APORTE MUY DETALLADA LA EXPLICACIÓN
Por favor! Necesito ayuda!
No sé dónde poner el código
En Diseño/Edición HTML
Sólo hay un ; y si pego el codigo, pongo la url de mi imagen donde dice, cuando le doy a vista previa no se ve nada en mi página D:!
No lo entiendo >.<
¿Alguien sabe? Lo agredecería mucho
¡Un saludo!
B U E N I S I M O O O O ! ! ! !
graciasssssss!!!!!!
ay mil gracias eres genial!
Gracias, lo había probado en algún javascript que se integraba con algún editor y fallaba mucho en la mayoría de navegadores. Este funciona sin problema alguno.
Querria esta imagen pero solo para indicar que hay correo nuevo y que desaparezca cuando se ha leido.
Tenía el código y lo he perdido.
Gracias.
mn buen dato me a servido para mi trabajo pronto lo posteare en mi blog agradecindo por el dato je
esto esta super, pero podrias ayudarme con un div que estoy haciendo transparente pero dentro de este div quiero hacer links y tambien escribir, pero cuando lo hago el teksto se vuelve tambien transparente y casi no se vee. espero pronto su respuesta.
gracias de antemano.
Dios le bendiga.
como coloco el url ??? como es el codigo presiso???
no se colocar este tampoco:
items[1] =
“http://media.twango.com/m1/original/0092/1860bae92ee74820b5b114310b399942.gif”
tengo un carpeta de images y yo coloco:
pero no funciona.
gracias por la ayuda.
Jenny
esto esta super, pero podrias ayudarme con un div que estoy haciendo transparente pero dentro de este div quiero hacer links y tambien escribir, pero cuando lo hago el teksto se vuelve tambien transparente y casi no se vee. espero pronto su respuesta.
gracias de antemano.
Dios le bendiga.
coño joder aqui ta tu capullo comentario, me pelas las pelotas entiendes?
Gracias x tu tontorial
oye muy bueno el tuto pero si quiero alinearlo al centro como le ago