Mover imagen al centro (modificar)

HackID1 · #1 (**permalink**) 28/02/2013, 11:20

Hola buenas a todos los del foro,
1. bueno me preguntaba como hacer que cuando pases el RATON por encima de una imagen esta imagen se posicione en el centro de la pantalla.

2. Y luego vuelva a su posición inicial.

Bien, lo 1 lo conseguí modificando el .style del elemento en los atributos:

-.style.top='20%';
.style.left='40%';
.style.width='20%';
.style.zIndex='10';

Si tienen una forma mejor porfavor decirmelo.

Y bueno ahora mi pregunta una vez hecho que la imagen se ponga en el centro de la página quiero que cuando selecciones la otra imagen, la 1 imagen baje a su posición inicial, y asi con todas.

Dejo el código hasta ahora.

Código Javascript:

Ver original<html>
 
<head>
    <title> Imagen Grande.
    </title>
    <style>
        #imagen1 {
        position: absolute;
        left: 5%;
        top: 85%;
        bottom: 5%;
        width: 4%;
        border: solid 2px red;
        }
    
        #imagen2 {
        position: absolute;
        left: 10%;
        top: 85%;
        bottom: 5%;
        width: 4%;
        border: solid 2px blue;
        }
        
        #imagen3 {
        position: absolute;
        left: 15%;
        top: 85%;
        bottom: 5%;
        width: 4%;
        border: solid 2px blue;
        }
        
        #imagen4 {
        position: absolute;
        left: 20%;
        top: 85%;
        bottom: 5%;
        width: 4%;
        border: solid 2px blue;
        }
        
        #imagen5 {
        position: absolute;
        left: 25%;
        top: 85%;
        bottom: 5%;
        width: 4%;
        border: solid 2px red;
        }
    </style>
    <script>
    /* Con esto posicionamos las imagenes en esos valores
        aproximadamente el centro de la página y en grande.
    */
        function subir(x)
        {
        var imagenes='imagen'+ x
        document.getElementById(imagenes).style.top='20%';
        document.getElementById(imagenes).style.left='40%';
        document.getElementById(imagenes).style.width='20%';
        document.getElementById(imagenes).style.zIndex='10';
        }
        
        function vuelve(x)
        {
        var imagenes='imagen'+ x
        document.getElementById(imagenes).style.top='85%';
        document.getElementById(imagenes).style.left='35%';
        document.getElementById(imagenes).style.width='4%';
        }
        
    </script>
</head>
<body>
    <h3 align="center">Posicionate sobre la imagen </h3>
    <!--Imagenes que suben-->
    <img id="imagen1" src="barca.jpg" onmouseOver="subir(1)" onmouseOut="vuelve(1)"/>
    <img id="imagen2" src="real.png" onmouseOver="subir(2)" />
    <img id="imagen3" src="nal.jpg" onmouseOver="subir(3)" />
    <img id="imagen4" src="amadrid.png" onmouseOver="subir(4)" />
    <img id="imagen5" src="chelsea.jpg" onmouseOver="subir(5)" />
    
</body>
</html>

Saludos espero me puedan ayudar
Lo que quiero es: cuando pases el ratón por la Imagen esta se ponga en el centro en grande.
Y cuando cambies de imagen esta 1 vuelva abajo y la 2 suba y asi sucesivamente.

Al final tengo una función llamada:

function vuelve(x)
{
var imagenes='imagen'+ x
document.getElementById(imagenes).style.top='85%';
document.getElementById(imagenes).style.left='35%' ;
document.getElementById(imagenes).style.width='4%' ;
}

Que es lo que intente para que volvieran, pero con esto solo bajan a esa posición y no a su posición inicial.