Como puedo colocar una imagen encima de otra?
es algo sencillo bueno esto lo hago por un favor que le hago
a Mario Jose que pregunta como colocar un efecto de hojas
cayendo de unos arboles en un paisaje bueno primero esta
el siguiente ejemplo.
En respuesta a tu pregunta Mario Jose, el codigo que tienes contiene mucho pero no le veo funcionamiento y te lo
mostrare solo con lo necesario ya que de nada sirve tener
tan extenso el codigo solo puede ocasionar que te confundas.
Esto es el ejemplo espero te sirva para lo que tu necesitas
este ejemplo es el mas practico explico en que consiste ya que debes de entender
en que consiste su proceso y su funcionamiento porque hay veces que al tratar de modificar el codigo
se pierde por completo todo y no te das cuenta de lo que ha pasado.
Primero: las dos imagenes ,el paisaje y las hojas, se encuentran dentro de una etiqueta div
que tiene de ancho 640 pixeles ( width: 640px ) que debe ser siempre el mismo tamaño de la imagen en este
caso el paisaje ya que si la imagen fuera mas grande se perderia un parte o si fuera mas chica
la imagen que son las hojas se mostrarian fuera del marco de la imagen del paisaje.
Segundo: La imagen de la hojas(imagen gif) las puedes colocar en otra posicion ya sea mas al centro,
mas a la derecha, a la izquierda ,abajo o arriba ,modificando lo siguiente en el codigo
( top:100px; right:0px; )
top es la parte superior de la imagen y right es a la derecha de la imagen cambialo juega con los
numeros y colocalo en la posision que te guste.
top:200px; right:100px; top:150px; right:150px; top:?px; right:?px; etc... Suerte!
Codigo:
<div style="position: relative; width: 640px; display:block; overflow: hidden; margin: auto;">
<img border='0' src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/id645879d9b922a91/1436330215/orig/notoyontoy.jpg' title='PAISAJE' alt='' />
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i730f3b9eccd1f087/1362614190/thumb/image.gif' style='position:absolute; top:100px; right:0px;' title='HOJAS' alt='' />
</div>
Segundo Ejemplo con un grado mas avanzado de dificultad
pero nunca dificil de aprender.
En el codigo dice donde se encuentra cada imagen.
Código
______________________________________________
<div id="notoyontoy" style="position: relative; width: 640px; display:block; overflow: hidden; margin: auto;">
<!--Esta es la imagen de el Paisaje-->
<img border='0' src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/id645879d9b922a91/1436330215/orig/notoyontoy.jpg' width'640px' title='Paisaje' alt='paisaje' />
<!--esta es la imagen de las hojas que estan cayendo-->
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i730f3b9eccd1f087/1362614190/thumb/image.gif' style='position:absolute; top:100px; right:10px;' alt='hojas' />
<!--este es la fogata-->
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i5ea6f8537cdd1993/1362613276/thumb/image.gif' width='100px' style='position:absolute; bottom:70px; left:100px;' alt='fogata' />
<!--las siguentes son las dos rosas de arriba-->
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i68c5a81d206e9a12/1362614190/thumb/image.gif' width='70px' style='position:absolute; top:10px; left:10px;' alt='rosa' />
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i68c5a81d206e9a12/1362614190/thumb/image.gif' width='30px' style='position:absolute; top:20px; right:20px;' alt='rosa' />
<!--Este es la paloma blanca-->
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i51108bc335b33bd0/1362611631/thumb/image.gif' width='26px' style='position:absolute; top:70px; right:205px;' alt='paloma' />
<!--este es la rosa roja -->
<img src='http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i154de4bea83d0704/1362614190/thumb/image.gif' width='24px' style='position:absolute; bottom:6px; right:50px;' alt='rosa roja' />
</div>
Espero les sirve y les gusta tanto y dejenme sus comentarios
nos vemos en el siguiente articulo del blog.
actualizado 08/07/2015
notoyontoy (jueves, 12 junio 2014 02:50)
Se han perdido algunos enlaces y no se ve claro el demo, pero muchas gracias.
ben (miércoles, 11 junio 2014 19:19)
gracias esta muy buena este tipo de alineacion gracias!!!
DANIEL (miércoles, 16 octubre 2013 18:04)
Hola ...muy bueno te felicito ...me impresionan .bueno ya lo puse y esta genial gracias :)
notoyontoy (martes, 25 junio 2013 21:37)
Esta bien Mario se ve que te gusta aprender, aqui estan mis respuestas:
1.-Eso se puede hacer en photoshop ,en phothoscape no tiene la funcion que necesitas siempre da a elegir un color de fondo ya sea blanco,color o negro, si estas pensando en descargar este programa te recomiendo ver tutoriales en youtube que te digan como instalarlo y te den en link de la descarga pero que la fecha del video sea lo mas actual posible del 2012 o 2013.
2.-En todas esta bien pero si guardas en galeria de fotos la url e ada imagen la obtienes asi;da clic a la imagen para verla completa, da clic derecho y eliges la opcion inspecionar elemento(solo con google crome) te saldra una ventana con muchos codigos y una parte seleccionado en azul que significa el objeto que señalaste si te fijas un poco arriba esta la url(letras azules) la seleccionas y te saldra ahi mismo la imagen y la url original listas para copiar.
Saludos, like a la pagina de inicio ;)
Mario (lunes, 24 junio 2013 18:38)
Un cordial saludo, nuevamente Mario; perdone tanta preguntadera; pero es que soy brutico para esto. Sin embargo quiero aprender. Una nueva ayuda porfa; 1- que programa conoce que al subir un gif animado con fondo transparente para modificarle algo y al guardarlo en mi PC no pierda el fondo transparente. tengo photoscape pero no se como hacerlo. 2- En que lugar de mi pagina jimdo puedo guardar los archivos para utilizarlos con URL, ejemplo en imagen, imagen con texto, galeria de fotos etc. Mil gracias.
notoyontoy (domingo, 23 junio 2013 16:00)
Yo te consejo que las guardes en tu misma pagina jimdo tienes 500mb de espacio para almacenar ,
una imagen como la el paisaje pesa 170 kb sacando calculos podrias guardar mas de dos mil imagenes como esa.
Compartenos con tus amigos ;) .
Mario (domingo, 23 junio 2013 14:13)
Hola amigo notoyontoy, Ud. me a ayudado bastante; le agradezco, como puede ver le puse el enlace de los pe talos que Usted guardo y me volvió a funcionar lo de esa imagen. Pienso que el problema puede estar en Picasa que es donde alojo mis imagines; de todas formas mil gracias...donde me aconseja alojar mis imagenes?.
Cordial saludo. Mario.
notoyontoy (domingo, 23 junio 2013 13:42)
hola Mario no veo nada mal mas que sí la imagen de los petalos esta dañada pero yo la guarde ese mismo dia en que hice este articulo y este es el enlace: http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i730f3b9eccd1f087/1362614190/thumb/image.gif
y creo que posiblemente sea ese nuevo windows que te marca los bordes en las imagenes ya he comprobado en internet explorer, Google crome y Mozila firefox y todo esta bien pero no habrá ningún problema ya que la mayoría de la gente usa el windows 7.
Saludos ;)
Mario (sábado, 22 junio 2013 16:50)
Cordial saludo, soy Mario la persona a quien Ud.gentilmente, alguna vez ayudo con lo de una imagen cayendo encima de la otra en este caso; los pétalos de rosa cayendo. Por favor quiero otra ayuda, resulta que de un momento a otro algunos gifs animados con fondo transparente que tengo en mi PC,les salio un borde en lineas como cuando se selecciona una imagen. No se si el problema es mi computadora, tengo windows 8: en su pagina también veo deforme los pétalos cayendo; diga me por favor si es así; de no ser así el problema es en mi PC.Por adelantado le doy mil gracias. Mario
Daniel Hurtado (DaniHv) Oficial (lunes, 05 noviembre 2012 14:58)
Hola @NotoyOntoy, Te Invito A Participar En El Concurso Web Design!, No Es El Mejor Pero Es Muy Bueno Y Muy Buenos Premios Más Info.
http://danihv.jimdo.com/concurso-web-design/
notoyontoy (domingo, 28 octubre 2012 20:30)
de nada lo importante es que aprendan algo nuevo.
Saludos, Haber si me invitas a tu web algun dia.
Mario Jose (sábado, 27 octubre 2012 16:51)
Muchas y muchas gracias; eso era lo que yo buscaba.Personas como Ud. son las que hacen mejorar la vida en este planeta.
Cordial saludo
Mario Jose