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