OnMouseOver em informação do banco de dados sempre apresenta a mesma i

[Pablo Felipe 0]

Olá!

 

Primeiramente minha div em CSS:

#fotoampliada

{
display: none;
position:fixed;
top:180px;
left:30px;
z-index: 8000; /* número máximo é 9999 */
}

e em JS:

function testes1(foto) {

document.getElementById('fotoampliada').style.display = 'block';
}
function teste1() {
document.getElementById('fotoampliada').style.display = 'none';
}

E tenho um loop de informações do banco de dados, sendo uma dessas informações a seginte:

<img src=" '. $row['foto'].' " width="110px" height="120px" onmouseover="testes1(this);" onmouseout="teste1();"/>

A div 'fotoampliada', está assim dentro do loop:

<div id="fotoampliada">

<img src=" '. $row['foto'].'" width="361px" height="291px" style="border-style: solid; border-width: 5px; border-color: orange;"/></div>

O prolema é que supondo que tenha 400 imagens no banco de dados ("OBS: A informação no banco é apenas o nome da imagem")

Ao passar o mouse sobre a imagem no loop ela não apresenta a imagem do mouse, mas sempre a primeira imagem do banco de dados.

Se eu colocasse na imagem onmouseover="this.src=\''.$row['foto'].'\'", então a imagem aonde o mouse está será apresentada, mas não na div, e sim a propria imagem mudaria para ela mesma no caso

Espero que alguem neste forum possa me ajudar... Muito obrigado

[ESerra 744]

id deve ser um elemento único na página, como você está repetindo o mesmo o navegador vai pegar apenas 1 mesmo.