Nwlapcug.com


Come creare una galleria di foto con HTML

Come creare una galleria di foto con HTML


Gallerie di foto online stanno diventando sempre più popolare su siti di social networking. Se avete il vostro sito Web, tuttavia, è necessario aggiungere le immagini da soli senza il lusso di un sistema automatizzato per fare il lavoro per voi. Gallerie fotografiche sono facili da mettere insieme in HTML (il linguaggio di programmazione principale per i siti Web). Richiede solo pochi semplici bit di codice, ripetuto per ogni immagine che si desidera includere.

Istruzioni

Galleria di scorrimento

1

Conservare le tue immagini online, sia in una cartella dedicata all'interno del vostro account di hosting (se ne avete uno) o con un servizio come Photobucket o Image Shack di hosting di foto.

2

Aprire il file HTML per la pagina su cui elencherà le foto.

3

Immettere il codice < IMG SRC = "ImageLocation" > per la prima immagine, sostituendo ImageLocation con l'URL effettivo dell'immagine. Ad esempio, < IMG SRC = "l'http://www.hostingsite.com/image1.jpg" >.

4

Ripetere questo codice per ogni immagine. Li fuori aggiungendo < BR > (interruzione di riga) o < P > (interruzione di paragrafo) possono essere distanziate tra codice di ogni foto. Finirete con qualcosa di simile:

< IMG SRC = "l'http://www.hostingsite.com/image1.jpg" >

< P >

< IMG SRC = "l'http://www.hostingsite.com/image2.jpg" >

< P >

< IMG SRC = "l'http://www.hostingsite.com/image3.jpg" >

Questo creerà una galleria di immagini che l'utente farà scorrere su e giù per visualizzare.

Galleria di miniature

5

Memorizzare le immagini online utilizzando uno dei metodi descritti nella sezione precedente.

6

Aprire il file HTML al quale si desidera dispongono di una galleria di miniature.

7

Aggiungere il codice seguente per la prima foto:

< a HREF = "ImageLocation" >< IMG SRC = "ImageLocation" WIDTH = "100" HEIGHT = "100" >< /A >

Questo codice si suddivide in tre parti:

< A HREF = "ImageLocation" >-stabilisce un collegamento web con le foto.

< IMG SRC = "ImageLocation" WIDTH = "100" HEIGHT = "100" > - la stessa immagine di codice come prima, ma ora la larghezza e l'altezza sono impostate a specifiche dimensioni in pixel. I numeri possono essere regolati per tutto quello che vuoi.

< /A > - chiude il collegamento web.

8

Aggiungi questo codice per ogni immagine. Per esempio:

< A HREF = "& lt; IMG" > http://www.hostingsite.com/image1.jpg "> & lt; IMG SRC ="il http://www.hostingsite.com/image1.jpg"WIDTH ="100"HEIGHT ="100">< /A >

< A HREF = "& lt; IMG" > http://www.hostingsite.com/image2.jpg "> & lt; IMG SRC ="il http://www.hostingsite.com/image2.jpg"WIDTH ="100"HEIGHT ="100">< /A >

< A HREF = "& lt; IMG" > http://www.hostingsite.com/image3.jpg "> & lt; IMG SRC ="il http://www.hostingsite.com/image3.jpg"WIDTH ="100"HEIGHT ="100">< /A >

Il risultato sarà tre 100 per 100 miniature di pixel tutti uno accanto a altro. Quando si fa clic sulla miniatura, si prende l'immagine full-size.