Abr
12
2008

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 xD

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
type="text/css">
y </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]
= “URL_de_la_imagen_11″
uno debajo del anterior y cambiando el número; o borrar los que no vallas a utilizar.

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.

Escrito por Loren en: Creaciones, Tontoriales | Etiquetas:, , , , , ,

89 comentarios »

  • Oeee! Al fin un tontorial imagen esquinera! Voy a ponerlo inmediatamente en práctica :D te lo has currado un puñao., gracias!

    Comentario por Wyrm — 13 Abril 2008
  • De nada hombre, gracias a tí por lo de las imágenes aleatorias :)

    Comentario por macuoren — 13 Abril 2008
  • 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 :S no lo puedes poner 1 poko mas para gente k no sabe?? gracias ^^

    Mi Web:

    http://es.geocities.com/k2kikod2/1

    Comentario por xDr4KoSx — 26 Abril 2008
  • 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.

    Comentario por Wyrm xD! — 26 Abril 2008
  • 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 ;)

    Comentario por xDr4KoSx — 26 Abril 2008
  • 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.

    Comentario por macuoren — 27 Abril 2008
  • de pm gracias ;) me mirare los tutos si tengo tiempo :)

    Comentario por xDr4KoSx — 1 Mayo 2008
  • 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 .

    Comentario por vela — 2 Mayo 2008
  • vela –> jajaja… precisamente ese es el objetivo de este tutorial :D

    Si quieres que se quede quieta la imagen aún cuando desplaces la web –> donde pone position:fixed cambia fixed por scroll

    Comentario por macuoren — 2 Mayo 2008
  • 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

    Comentario por Kikus — 16 Mayo 2008
  • @Kikus –> se bienvenido pues ^_^

    Yo también te he añadido a mi lista de blogs, tiene buena pinta.

    Comentario por macuoren — 20 Mayo 2008
  • [...] [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

    Comentario por Gabriel — 11 Agosto 2008
  • 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.

    Comentario por Loren — 11 Agosto 2008
  • 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.

    Comentario por cam — 25 Agosto 2008
  • 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.

    Comentario por Loren — 25 Agosto 2008
  • ta chebre pero no entiendo el resto

    Comentario por anthony — 11 Diciembre 2008
  • Yo tampoco, y de entrepierna.

    Comentario por Miche — 12 Diciembre 2008
  • O de entregüevo

    Comentario por Loren — 12 Diciembre 2008
  • Oye menos cachondeo.
    Estril Faitel! Fait!

    Comentario por Wyrm — 12 Diciembre 2008
  • 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
    xD
    o la que ya te dije :
    ”Como no comentes te como la oreja”
    xD

    Comentario por Zepo — 12 Diciembre 2008
  • No entiendo ni mierda…
    si podrias poner mejor
    el codigo completo y asi te agradeceria 1 millon de veces

    Comentario por Anthony — 12 Diciembre 2008
  • @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 :D

    Comentario por Loren — 12 Diciembre 2008
  • [...] 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!!!

    Comentario por ruddyjP — 14 Mayo 2009
  • Gransias hombre! no hay de que! :D

    Comentario por Loren — 14 Mayo 2009
  • De nada hijo ruddy, hacemos lo que podemos.

    Comentario por Wyrm — 14 Mayo 2009
  • nadie conoce algun hack para dejar una imagen estatica en IE 6¿?

    Comentario por uno.. — 11 Junio 2009
  • 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

    Comentario por 0ozz — 27 Junio 2009
  • 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

    Comentario por Loren — 27 Junio 2009
  • 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

    Comentario por Facundo — 24 Julio 2009
  • Prueba poniendo solo este código:

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

    Comentario por Loren — 26 Julio 2009
  • 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

    Comentario por Oso Gringo — 28 Julio 2009
  • 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.

    Comentario por PONGO MI VOZ — 27 Agosto 2009
  • 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 xD

    Comentario por lopz — 31 Agosto 2009
  • Que va, no me paso para nada en los comentarios :P

    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;
    }

    Comentario por Loren — 31 Agosto 2009
  • ¡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!

    Comentario por Jassiel — 23 Septiembre 2009
  • De nada hombre, da gustico ser útil ^_^

    Comentario por Loren — 23 Septiembre 2009
  • 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>”

    Comentario por Onetwothree — 25 Septiembre 2009
  • 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 :)

    Comentario por Loren — 26 Septiembre 2009
  • 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.

    Comentario por Onetwothree — 27 Septiembre 2009
  • Como el que utilizaste tu en “Imagen Flotante Fija en la Esquina” pero con la a href delante para que enlace a la web.

    Comentario por Onetwothree — 27 Septiembre 2009
  • 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)?

    Comentario por Loren — 27 Septiembre 2009
  • Poniéndolo así, no?:

    No funciona tampoco, incluso lo he metido como un widget y no como parte de la plantilla y nada :S

    Comentario por Onetwothree — 27 Septiembre 2009
  • 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>

    Comentario por Loren — 27 Septiembre 2009
  • 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.

    Comentario por Onetwothree — 27 Septiembre 2009
  • 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>

    Comentario por Loren — 27 Septiembre 2009
  • 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.

    Comentario por Onetwothree — 28 Septiembre 2009
  • 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.

    Comentario por Anónimo — 28 Septiembre 2009
  • El anónimo anterior era yo^^

    Comentario por Onetwothree — 28 Septiembre 2009
  • Bueno pero veo que ya lo tienes solucionado, c’est fini pues, mu bien ^_^

    Comentario por Loren — 28 Septiembre 2009
  • 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 :S

    Comentario por Diegiinn — 27 Octubre 2009
  • por cierto muy bueno el blog y el aporte :P

    Comentario por Diegiinn — 27 Octubre 2009
  • Debes ponerlo antes de </body>, si es justo antes no te equivocas :)

    Comentario por Loren — 28 Octubre 2009
  • hiee porque nop puedoo participarrr

    Comentario por Anónimo — 5 Noviembre 2009
  • 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

    Comentario por Anónimo — 5 Noviembre 2009
  • Si no pones un enlace a tu web va a ser difícil :D

    Comentario por Loren — 6 Noviembre 2009
  • 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.

    Comentario por MEMEElvira — 17 Diciembre 2009
  • Me alegra que te haya servido :)

    Comentario por Loren — 17 Diciembre 2009
  • Chido, me latió tu post y sí me fue de utilidad, gracias carnal!!!

    Comentario por Kazbam — 30 Marzo 2010
  • Excelente bro, lo que andaba buscando.

    Comentario por izarkc — 30 Marzo 2010
  • exelente muxas grax :)

    Comentario por koreandreams — 3 Abril 2010
  • 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

    Comentario por dildy — 22 Abril 2010
  • @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.

    Comentario por Loren — 26 Abril 2010
  • acabas de tu web pusiste al pelado en la esquina inferior

    Comentario por gonna — 13 Julio 2010
  • ta bueno ese pulpo

    Comentario por gonna — 13 Julio 2010
  • 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?

    Comentario por gonna — 13 Julio 2010
  • BIEEN BRO!! GRACIAS POR LOS CÓDIGOS!!

    Comentario por DEFTONESclown — 8 Agosto 2010
  • si pudieras facilitar un link de donde podamos sacar las figuritas estas seria lo maximo porfavor? gracias

    Comentario por DEFTONESclown — 8 Agosto 2010
  • 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.

    Comentario por Loren — 9 Agosto 2010
  • Buena solución

    Comentario por Manuel Silva — 15 Julio 2011
  • Genial, buena explicación y fácil de entender y aplicar. Gracias

    Comentario por platanox — 13 Agosto 2011
  • ESTA BUENPO PERO UNO PARA HACER DESAPARECER LA IMAGEN SI NO ES MUCHO PEDIR

    Comentario por CARLO9S — 24 Agosto 2011
  • ¿qué pasa con las imágenes flotantes si cambio la resolución de pantalla?

    Comentario por Alejandro — 31 Agosto 2011
  • 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

    Comentario por Loren — 1 Septiembre 2011
  • GRACIAS POR EL APORTE MUY DETALLADA LA EXPLICACIÓN

    Comentario por MIKE — 3 Septiembre 2011
  • 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! :D

    Comentario por Deryn — 5 Septiembre 2011
  • B U E N I S I M O O O O ! ! ! !

    Comentario por ZaThu — 9 Septiembre 2011
  • graciasssssss!!!!!!

    Comentario por SERGIO — 5 Octubre 2011
  • ay mil gracias eres genial!

    Comentario por kike — 20 Octubre 2011
  • 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.

    Comentario por Justo — 26 Octubre 2011
  • 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.

    Comentario por Ana — 27 Octubre 2011
  • mn buen dato me a servido para mi trabajo pronto lo posteare en mi blog agradecindo por el dato je :)

    Comentario por enrique — 10 Noviembre 2011
  • 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.

    Comentario por Jenny — 18 Noviembre 2011
  • 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

    Comentario por Jenny — 19 Noviembre 2011
  • 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.

    Comentario por Jenny — 19 Noviembre 2011
  • coño joder aqui ta tu capullo comentario, me pelas las pelotas entiendes? :D Gracias x tu tontorial

    Comentario por Axel — 24 Noviembre 2011
  • oye muy bueno el tuto pero si quiero alinearlo al centro como le ago

    Comentario por lamo — 26 Noviembre 2011

RSS feed for comments on this post. TrackBack URL

Dejar un comentario

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes