Problemi ingrandimento immagini con javascript

Sara_2

Nuovo Utente
15 Set 2015
2
0
0
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

Utente Attivo
15 Nov 2012
135
0
0
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
Codice:
onmouseover="cambia(this)" onmouseout="torna(this)

mentre nella funzione dovresti modificare
Codice:
function cambia(a) {
a.width="300";
a.height="300";
}
function torna(a) {
a.width="150";
a.height="150";
}

e dovrebbe funzionare
 
Discussioni simili
Autore Titolo Forum Risposte Data
N php problemi a visualizzare video PHP 3
T problemi con dati menu a tendina HTML e CSS 2
T problemi di connessione MySQL 2
M Upload immagine con javascript problemi con FormData() Javascript 1
F Problemi visualizzazione mappa Android studio Sviluppo app per Android 0
S Problemi Javascript + Aruba Javascript 2
A Problemi con move_uploaded_file PHP 7
M Problemi con la stampa dei valori in php PHP 1
L Problemi con il login PHP 2
L Problemi form Pagina php HTML e CSS 3
R Tutto su utf-8 ma ancora problemi con i caratteri speciali in mysql MySQL 1
Z problemi con foreach insert into PHP 10
B javascript per problemi con pdf e Safari Javascript 0
N Problemi kit videosorveglianza IP Cam e Videosorveglianza 0
M Problemi con creazione maschere Presentati al Forum 1
M Problemi con query a più tabelle PHP 3
R Problemi anomalo insermento in db PHP 9
S Problemi delle funzioni eliminate con PHP e MySQL PHP 4
S Problemi di un principiante PHP 3
M Problemi con blog Grav CMS (Content Management System) 0
F Problemi di visualizzazione di un sito su più browser WordPress 0
S Problemi di visualizzazione form contatti sito web HTML e CSS 2
S incoerenza di stampa. problemi con il magenta Photoshop 3
A problemi con paypall Java 1
A Problemi di accesso da remoto a Ipcam IP Cam e Videosorveglianza 5
michele81 [WordPress] problemi plug meteo api key WordPress 4
E Problemi in registrazione telecamere Dahua IP Cam e Videosorveglianza 6
S Problemi con modulo upload video php (help!) PHP 0
felino [Windows 8.1] Problemi con connessione WiFi Windows e Software 0
M [PHP] Problemi su inserimento array nel db PHP 7
E [PHP] problemi nuova riga con fwrite su piattaforma android PHP 5
M [PHP] Problemi di salvataggio su campo calcolato PHP 0
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
M [PHP] Problemi con query unione PHP 11
M [PHP] Problemi con select PHP 6
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
ANDREA20 [HTML] problemi con il footer HTML e CSS 1
D [MS Access] problemi con inserimento campo in una maschera MS Access 6
M [PHP] Problemi con il riconoscimento login. PHP 21
A [WordPress] problemi con xampp WordPress 2
M Problemi con database Apache/2.4.37 (Win32) OpenSSL/1.1.1a PHP/7.3.1 PHP 6
P Problemi comunicazioni Comunicazioni dallo Staff 8
G I problemi non vengono solo per nuocere Presentati al Forum 0
A Problemi Wi-Fi Fastweb Reti LAN e Wireless 4
C [WordPress] Url vulnerability e problemi sito da mobile WordPress 0
S [PHP] problemi con le sessioni PHP 3
B Problemi accesso Instagram Smartphone e tablet 1
T [PHP] problemi con il browser PHP 0
M [Flash] Problemi conversione formato swf Flash 20
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5

Discussioni simili