Problemi ingrandimento immagini con javascript

[Sara_2]

Salve a tutti, sono una nuova iscritta!
Avrei bisogno di un aiuto: sto realizando un sito ed ho creato un form attraverso il quale il visitatore puo inviare delle foto che vengono automaticamente inserite in una cartella attraverso codice PHP e fin qui tutto bene. Nella pagina contenente i vari risultati del form l'utente puo decidere se visualizzare o meno le foto inviate (presenti appunto nella cartella) avendole inserite in un div che viene aperto e chiuso attraverso i bottoni MOSTRA NASCONDI e quindi la relativa funzione javascript che cambia la proprietà display ( display: block / display: none).
Ora arriva il problema :crying: vorrei che una volta mostrate le foto, poichè esse sono tutte della stessa dimensione (150x150), l'utente possa ingrandirle passandoci sopra con il mouse usando gli eventi (onmouseover/onmouseout). Ho scritto del codice ma quello che succede è che viene ingrandita SOLO la prima foto e non tutte le altre...qualcuno puo aiutarmi perfavore?

questo è il codice:
(javascript per ingrandire al passaggio del mouse)
<script type="text/javascript" >
function cambia(){
document.getElementById("myimg").width="300";
document.getElementById("myimg").height="300";
}
function torna(){
document.getElementById("myimg").width="150";
document.getElementById("myimg").height="150";
}
</script>


(php per visualizzare le immagini prese dalla cartella)
<?php
//apro la directory contenente le immagini
$dir = opendir('immagini/');
$images = array();
$html = '';
while($fname = readdir($dir)) {
if(preg_match('/[.]jpg$/', $fname)) {
$images[] = $fname;
}
}
closedir($dir);
//eseguire un ciclo sul nostro array e assemblare la risultante stringa HTML
foreach($images as $img) {

$html .= ' <img src="immagini/' . $img . '" alt="" height="150" width="150" id="myimg" OnMouseOver="cambia()" OnMouseOut="torna()" " />';
}
echo $html ;

?>

 

[n1k4r0]

non puoi avere più elementi con lo stesso id, il browser si fermerà sempre al primo che trova ed è per questo che ne funziona soltanto uno. per far funzionare la pagina dovresti modificare le chiamate alla funzione e la funzione stessa.

per le chiamate prova questo

onmouseover="cambia(this)" onmouseout="torna(this)

mentre nella funzione dovresti modificare

function cambia(a) {
a.width="300";
a.height="300";
}
function torna(a) {
a.width="150";
a.height="150";
}

e dovrebbe funzionare

 

[Sara_2]

Ora funziona tutto, ti ringrazio molto!!