Scuola forum (scuo.la) - Forum di discussione per le scuole

Scuola forum (scuo.la) - Forum di discussione per le scuole (https://www.scuolaforum.org/)
-   Informatica (https://www.scuolaforum.org/informatica/)
-   -   Come far comparire in uno spazio la foto del nome su cui clicco (https://www.scuolaforum.org/informatica/208-come-far-comparire-uno-spazio-la-foto-del-nome-su-cui-clicco.html)

serse 10-22-2007 09:10 AM
Come far comparire in uno spazio la foto del nome su cui clicco
 
Ciao,
sto facendo una pagina html/css di un elenco di persone, in cui in alto vi è la foto e sotto c'è l'elenco.
Io vorrei che al cliccare del nome dell'elenco, il browser mi riporti in alto (con l'ancora) e mi visualizzi la foto della persona.
Lo spazio per l'immagine è uno solo e le foto sono una cinquantina.
Come faccio quindi a far comparire in quello spazio la foto del nome su cui clicco?
Grazie

daniele 10-23-2007 09:14 AM
Ciao,
fammi capire, praticamente stai dicendo che hai una foto principale in alto e sotto un elenco di "collegamenti", la foto principale deve cambiare dinamicamente secondo il "collegamento" selezionato senza che questi cambino realmente la pagina (ma solo l'immagine)? Dunque con javascript.

serse 10-23-2007 09:15 AM
Quote:
Originariamente inviata da daniele (Messaggio 1663)
Ciao,
fammi capire, praticamente stai dicendo che hai una foto principale in alto e sotto un elenco di "collegamenti", la foto principale deve cambiare dinamicamente secondo il "collegamento" selezionato senza che questi cambino realmente la pagina (ma solo l'immagine)? Dunque con javascript.
Esatto!
Hai idea di come fare?
Grazie

michele 10-23-2007 11:10 AM
Ci sono due possibilità:
Che le foto sono sempre presenti nella pagina (in modo nascosto), quindi con un tempo più lungo di caricamento della pagina (magari in modo invisibile) e si può pensare di farlo con i soli CSS (con modifiche).

Altrimenti le foto vengono caricate di volta in volta (al click) con un tempo di attesa dopo il click, e qui occorre JavaScript o un intervento lato server.
A te la scelta di quale soluzione implementare.

serse 10-23-2007 11:12 AM
Quote:
Originariamente inviata da michele (Messaggio 1665)
Ci sono due possibilità:
Che le foto sono sempre presenti nella pagina (in modo nascosto), quindi con un tempo più lungo di caricamento della pagina (magari in modo invisibile) e si può pensare di farlo con i soli CSS (con modifiche).

Altrimenti le foto vengono caricate di volta in volta (al click) con un tempo di attesa dopo il click, e qui occorre JavaScript o un intervento lato server.
A te la scelta di quale soluzione implementare.
Mi interesserebbe di più la seconda possibilità, quella con il Javascript, ma voglio valutare anche la prima. Non hai una qualche dritta, una guida, un link che spieghi come fare?
Grazie mille

Tullio 10-23-2007 02:21 PM
Devi assegnare alla foto grande un id, ad esempio

codice HTML:
<img src="/percorso/dell/immagine.jpg" alt="Foto" "id="foto" />
e fare dei collegamenti per ogni persona di cui vuoi visualizzare la foto:

codice HTML:
<a href="#" onclick="getElementById('foto').src='/percorso/della/foto/1.jpg'">Foto 1</a>
<a href="#" onclick="getElementById('foto').src='/percorso/della/foto/2.jpg'">Foto 2</a>
<a href="#" onclick="getElementById('foto').src='/percorso/della/foto/3.jpg'">Foto 3</a>
e così via.
Volendo puoi anche alterare di volta in volta il tag alt dell'immagine:

codice HTML:
<a href="#" onclick="getElementById('foto').src='/percorso/della/foto/1.jpg'; getElementById('foto').alt='Foto 1'">Foto 1</a>
<a href="#" onclick="getElementById('foto').src='/percorso/della/foto/2.jpg'; getElementById('foto').alt='Foto 2'">Foto 2</a>
<a href="#" onclick="getElementById('foto').src='/percorso/della/foto/3.jpg'; getElementById('foto').alt='Foto 3">Foto 3</a>

michele 10-23-2007 03:29 PM
Quote:
Originariamente inviata da serse (Messaggio 1666)
Mi interesserebbe di più la seconda possibilità, quella con il Javascript, ma voglio valutare anche la prima. Non hai una qualche dritta, una guida, un link che spieghi come fare?
Grazie mille
La prima soluzione utilizza tecniche che sono presenti nelle gallerie. Tu pero` hai una serie di link testuali al posto dei link ad immagine delle gallerie "standard".
Puoi fare una ricerca in rete con la parola "galleria" ("gallery").

Per la seconda, ormai te l'hanno già detta!

Nota che la soluzione con JS e` non-accessibile: se JS non e` abilitato la pagina non ha senso. Non e` quindi utilizzabile per pagine di amministrazioni pubbliche o dove si vuole fare pagine universali.

serse 10-23-2007 11:03 PM
Quote:
Originariamente inviata da Tullio (Messaggio 1667)
Devi assegnare alla foto grande un id, ad esempio...[cut]
Ho provato e va: solo con Firefox però!
Con IE non cambia la foto!
A cosa è dovuto?
Grazie

Clemente 10-24-2007 11:33 AM
Ciao.
Prova ad utilizzare i codici indicati in questa pagina:
http://www.cryer.co.uk/resources/jav...show.htm#_self

serse 10-24-2007 11:35 AM
Quote:
Originariamente inviata da Clemente (Messaggio 1677)
Ciao.
Prova ad utilizzare i codici indicati in questa pagina:
Interessante!
Però se non sbaglio fa lo slide show per un solo link, invece a me serve che lo faccia quando clicco su link diversi...!

Tullio 10-25-2007 02:50 PM
Quote:
Originariamente inviata da serse (Messaggio 1674)
Ho provato e va: solo con Firefox però!
Con IE non cambia la foto!
A cosa è dovuto?
Grazie

Scusa, hai ragione!
Mi sono dimenticato che prima di
codice:
getElementById
devi scrivere
codice:
document.
in tutti i link.

Inoltre dove c'è scritto
codice:
"id="foto"
va tirato via il primo doppio apice, quindi:
codice:
id="foto"
E' tutto e testato con Firefox, Konqueror, Opera e IE6 (con wine) e funziona con tutti.

serse 10-25-2007 04:09 PM
Ok, tutto funzionante.
Per chiarezza, riporto il codice:

codice:
<img src="immagini/0.jpg" alt="foto" name="foto" width="400" height="400" id="foto" />
E questo è quello che va applicato a tutti i link:
codice:
<a href="#" onclick="document.getElementById('foto').src = 'immagini/1.jpg'">Foto 1</a>
Ciao e grazie:ciaociao:


Tutti gli orari sono GMT +2. Attualmente sono le 06:01 PM.