Colocar imagen sobre otra dinámicamente (Programación)

Posiciones de imágenes dinámicas

Con este tutorial aprenderás a cambiar el z-index con javascript y a colocar imágenes sobre otras.

Como primer post de programación, les dejo un tutorial que realicé para un blog que duró unos pocos meses.

Pon el mouse encima de las distintas imágenes para que veas el efecto de cambio de orden.


Esto fue creado usando 4 imágenes que se fueron poniendo una encima de otra, combinando CSS y un poco de javascript.


Thor
Thor
Thor
Thor


Para realizar esto primero tendrás que aprender un par de atributos CSS, los cuales son:

1_position:absolute: Con este atributo podrás poner objetos sobre otros y darles un orden...Su posición dependerán del div dentro del cual está, ya que no será lo mismo por ejemplo darle un margen izquierdo (margin-left), que darle un posición inicial desde la izquierda(left), el primero dará un margen desde la izquierda partiendo desde es div que lo encierra, en cambio left tomará las coordenadas desde la posición izquierda de todo el documento. (Es lo mismo para right-derecha-, top-superior-, bottom-fondo-)

2_z-index: Con esto podrás darle un orden para poner un elemento arriba o abajo, su valor siempre será un número, mientras mayor sea el número mas arriba se mostrará el elemento, es como trabajar con capas en photoshop (para quien lo haya usado), si tengo una imagen con z-index:1 y otra con z-index:2 , la que tiene 2 se mostrará encima de la que tiene 1.

Ahora apliquemos esto a nuestro ejercicio

Primero veamos el CSS que tendrá



<style type="text/css">
/*Imagen de fondo*/
.fondo_zeus{
position:absolute;
z-index:1; /*valor 1:Será la que se vea más al fondo*/
}

/*Las imagenes pequeñas las meteremos dentro de un div llamado cartas*/
.cartas img{/*modifica todas las imagenes al interior del div cartas*/
cursor:pointer;/*cambiamos el cursor al de la mano(link)*/
position:absolute;/*todas las imágenes dentro de este div tendrán posición absolute*/
}

/*imagen de Thor (la de la izquierda)*/
.thor{
margin-top:85px;/*margen superior respecto al comienzo del div*/
margin-left:-30px; /*negativo, para que se posicione antes del comienzo del div(es el efecto para que salga del fondo)*/
}

/*imagen de Sigfried (la del centro)*/
.sigfried{
margin-top:90px;
margin-left:36px;
}

/*imagen de thor (la de la derecha)*/
.kronos{
margin-top:100px;
margin-left:76px;
}
</style>



Ya les parece complicado?? pues no lo es, si se fijan al verlo parece mucho código, pero si toman atención es casi lo mismo en todo...

*Lo que está en rojo son llamadas a funciones javascript que crearemos más adelante.

Ahora veamos el HTML que va en el body de la página



<!--padding-left para que pueda verse bien primera carta que aparece entes(sólo para este ejemplo)-->
<div style="padding-left:50px;">
<!--imagen de fondo-->
<img border="0" class="fondo_zeus" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFfbRyFCArEscCkxTx5V9F235799jhzujyr04dYdQxctY0yD7_hc0T224NVrYms6JrTUjHzIVzhRFNCruNsW4CRnQsd_NgHJcc2QdHC1pFZT1tIOpj7dnKH-d-lv5UfbTncdVjL4P0Es/s320/Zeus+Wallpaper%252CMitos+y+Leyendas%252C+Salo%252C+Mauricio+Herrera%252C+Hel%25C3%25A9nica.jpg" width="320" />

<!--cartas pequeñas-->
<div class="cartas">

<img border="0" class="thor" height="120" onmouseout="regresazindex(this);" onmouseover="cambiozindex(this);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3d5SbV-H1nu_6jDBEh8CMBmdytTimZliTIMsyfEz_bodGN3CbRRBw3ROZ7Efb4URAJ5LsHtZVoScJgf5i1K5R_e4Q16mjo42UMr-knNkyjPBM09KgKCLWVA5AdVi9Ozqw2LCWdEJ1K4/s120/Thor%252C+Mitos+y+Leyendas%252C+Salo%252C+Mauricio+Herrera%252C.png" style="z-index: 666;" width="96" />

<img border="0" class="sigfried" height="100" onmouseout="regresazindex(this);" onmouseover="cambiozindex(this);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSAUIdRp3gJD-ND1sZ_sG-tto5zW9eASKwYfVW8C4GbtOMYeaINrWxxlAeYNDGPPFIOomjBt6jAE3Y74jOF8hHj_g5_5HIuIOJwhKM_VN7N6_ZOynL-5LdOoBMgmRE4taDOAmUx_qPu_o/s120/Sigfried%252C+Mitos+y+Leyendas%252C+Salo%252C+Mauricio+Herrera%252C+Barbarie.png" style="z-index: 667;" width="76" />

<img border="0" class="kronos" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCs5KrJ2oX1hKYNC4CPDdQEeOiKk97ibEWXtoe4sodzwqR_SsU8Q5OhWwAG8rgIC3GKxRWiBkoAXeOf6hTHkvpZDotk2cj6ojwKAa98a41ikHXEpJxRJRldU3KpNlIHp8pwEaIg4dq1Ss/s120/Kronos%252C+Mitos+y+Leyendas%252C+Salo%252C+Mauricio+Herrera%252C+Hel%25C3%25A9nica.png" style="z-index: 668;" width="92" />

</div>
</div>


Explicación:
De color azul están las llamadas a las clases.
De color rosado están los z-index, los cuales los definí en el HTML para que la función javascript a utilizar los tome sin necesidad de usar un id en las imágenes.
De color rojo están las llamadas a las funciones javascript cuando ocurra un evento, el cual puede ser:

onmouseover: función que se ejecuta cuando el mouse esté encima de la imágen.
onmouseout: función que se ejecuta cuando el mouse sale del área de la imágen.
(this): sirve para enviar los atributos de la imagen a la función javascript que utilizaremos.

Si se fijan la tercera imagen no tiene una llamada a funciones javascript, esto se debe a que no debe cambiar su z-index, ya que siempre será la que este posicionada más arriba.

Ahora sólo nos queda un par de funciones javascript para dar el efecto de traer la carta al frente.


<script type="text/javascript">
//con ev recibe los atributos que le manda (this)
function cambiozindex(ev){//al poner el mouse encima de la imagen
//obtenemos el z-index actual de la imagen
var indice_original=parseInt(ev.style.zIndex);
//Al actual se lo aumentamos para que quede encima de las demás imágenes
ev.style.zIndex=indice_original+7;
}
function regresazindex(ev){//al salir el mouse
//obtenemos el z-index
var indice_original=parseInt(ev.style.zIndex);
//se lo restamos para que vuelva al original que tenía
ev.style.zIndex=indice_original-7;
}
</script>


Finalmente esta todo listo, y puedes ver el código fuente completo y funcionando de como posicionar imágenes haciendo click acá (para ver el código haz click en la opción "HTML")

Como nota final recuerda que este es sólo el comienzo, puedes personalizarlo añadiendo enlaces a otras páginas, o lo que quieras, además está solo es la base para crear tus propios efectos personalizados.



**Cualquier sugerencia o correción será bien recibida.
--Creado por @kai_alexis20--

2 comentarios:

Unknown dijo...

Excelente aporte.

Podrías hacer un turorial para hacer este mismo montaje pero que la imagen resultante sea una sola.

Es que cuando se utiliza el z-index solo se pueden guardar las imágenes por separado, y necesito que las el montaje me quede es en una única imagen.

Sería una imagen con transparencia que nos servirá de marco, y una segunda imagen destinada a ser el fondo.

Saludos.

Alexis dijo...

Hola,

Gracias por el comentario. Te podría ayudar, pero ¿me podrías comentar de nuevo? la verdad es que no entendí mucho. Si puedes déjame alguna imagen de cómo quieres que esté en un comienzo y otra de cómo quieres que esté con lo que necesitas.

Saludos

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Publicar un comentario

Si quieres usar un emoticon como los de arriba sólo escribe el símbolo que aparece al lado del que quieres.

IMPORTANTE: Por tema de tiempo, los mensajes del blog los podré responder sólo los fines de semana, aunque dependiendo del mensaje puede que sea antes.
Por lo anteriora aconsejo que si dejas un comentario esperando una respuesta te sugiero que hagas click en Suscripción por correo electrónico para saber cuando se ha respondido.

Saludos