Funciones con imagenes JS

[dacostaaa]

Hola.. necesito ayuda, estoy realizando una pagina web, donde tengo en mi galería, varias imágenes en tamaño pequeño, las cuales se agrandan al hacer mouseover y vuelven a su estado normal con mouseout. El problema es que la función que cree para javascript se aplica a una sola imagen, y cuando lo quiero aplicar a las demás no puedo, como debería hacerlo? Soy muy principiante en el tema.

JS=

function initElement()
{
var p = document.getElementById("foo");

p.onmouseover = showMouseOver;
p.onmouseout = showMouseOut;
};

function showMouseOver()
{
var notice = document.getElementById("notice");
notice.style.visibility= "visible";
notice.style.position="absolute";
notice.style.left="185px";
notice.style.top="215px";
notice.style.position="absolute";
notice.style.width="450px";
notice.style.height="253px";
}

function showMouseOut()
{
var notice = document.getElementById("notice");
notice.style.visibility= "hidden";
notice.style.position="absolute";
notice.style.left="185px";
notice.style.top="475px";
notice.style.width="150px";
notice.style.height="84px";
}
window.onload=initElement;


HTML=

<section onload="initElement();">
<section id="foo">
<img src="gotham-cast.png" width="150" height="84"/>
</section>
<div id="notice">
<img src="gotham-cast1.png">
</div>
</section>


CSS=

#foo {
position: absolute;
left: 185px;
top: 475px;
}
#notice{
visibility: hidden;
}

[Alexis88]

Bienvenido a Foros del Web.

Delega los eventos al documento, asigna una misma clase para todas las imágenes y cada vez que se produzcan dichos eventos en el documento, toma al elemento afectado, obtén su clase y si es igual al que asignaste a las imágenes, le aplicas el efecto.

Código Javascript:

var over = function(event){
        if (event.target.className == "la clase"){
            event.target.style.transform = "scale(1.2)"; //Crece
        }
    },
    out = function(event){
        if (event.target.className == "la clase"){
            event.target.style.transform = "scale(1)"; //Se reduce
        }
    };
 
document.addEventListener("mouseover", over, false);
document.addEventListener("mouseout", out, false);
 

Mediante la propiedad transform puedes modificar, entre otras cosas, las dimensiones de los elementos.

DEMO

Saludos

[dacostaaa]

Tengo una duda, como podría hacer para darle una ubicación diferente a cada imagen? porque en la clase me modifica en todas, y cada una tiene una ubicación diferente. No se si me explico bien,

Gracias!

[Alexis88]

Podrías tener un array con las posiciones predeterminadas, luego, tomas al conjunto de imágenes que posean la clase que les asignaste y, en cada iteración, le asignas la posición respectiva a cada imagen.

Por ejemplo, si tuviéramos tres imágenes:

Código Javascript:

var posiciones = [{top: "50px", left: "25px"}, {top: "138px", left: "243px"}, {top: "170px", left: "184px"}],
    imagenes = document.querySelectorAll(".la clase"),
    total = imagenes.length;
 
for (var i = 0; i < total; i++){
    imagenes[i].style.marginTop = posiciones[i].top;
    imagenes[i].style.marginLeft = posiciones[i].left;
}
 

Y si quisieras que las posiciones fueran aleatorias, ya no usarías el array con las posiciones sino los métodos Math.random() y Math.floor().

Código Javascript:

for (var i = 0; i < total; i++){
    imagenes[i].style.marginTop = Math.floor(Math.random() * total) + "px";
    imagenes[i].style.marginLeft = Math.floor(Math.random() * total) + "px";
}
 

Para este último ejemplo, debes de tomar en cuenta que si el total de imágenes es un número bajo, las imágenes no se alejarán mucho de la posición por defecto.

Saludos