Come far comparire in uno spazio la foto del nome su cui clicco

serse · 10-22-2007, 10:10 AM

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, 10: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, 10:15 AM

Quote:

Originariamente inviata da daniele

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, 12:10 PM

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, 12:12 PM

Quote:

Originariamente inviata da michele

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, 03: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, 04:29 PM

Quote:

Originariamente inviata da serse

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-24-2007, 12:03 AM

Quote:

Originariamente inviata da Tullio

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, 12:33 PM

Ciao.
Prova ad utilizzare i codici indicati in questa pagina:
http://www.cryer.co.uk/resources/jav...show.htm#_self

serse · 10-24-2007, 12:35 PM

Quote:

Originariamente inviata da Clemente

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, 03:50 PM

Quote:

Originariamente inviata da serse

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, 05: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

Discussioni simili
Discussione	Ha iniziato questa discussione	Forum	Risposte	Ultimo messaggio
Come far comparire l'asse secondario X e Y in grafico Excel	Isabel	Informatica	1	07-08-2011 01:40 PM
Non credete che sia necessario uno spazio per la filosofia?	AndreaC	Domande & Suggerimenti	5	04-05-2010 04:00 AM
Spazio su HD ridotto pur non avendo immagazzinato altri file	Alfredo Di Pietro	Informatica	2	12-21-2009 10:46 PM
Salvare mail da Mozilla Thunderbird con il nome dell'oggetto	serse	Informatica	0	01-10-2009 06:24 PM
Copiare propri file di backup su spazio web o alternative?	Edilio	Informatica	6	11-21-2008 02:06 PM

Menu

Come far comparire in uno spazio la foto del nome su cui clicco