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