Immagini |
Puoi mettere un' immagine all' interno della tua pagina tramite il tag <IMG>. Questa e' la sintassi:
<IMG SRC="qualcosa" ALIGN=qualcosa ALT="qualcosa" BORDER="numero" VSPACE="numbero" HSPACE="numbero" WIDTH="numbero" HEIGHT="numbero" ISMAP>
Se vuoi mettere un' immagine all' interno della tua pagina, prima di tutto devi dire al browser web il nome dell' immagine e dove e' situata. Puoi farlo tramite il parametro SRC:
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
<IMG SRC="home.gif">
</body>
</html>
Attenzione: il browser web non sa dove e' situata l' immagine, percio' devi definire il path. Cosi', nel precedente esempio, il tag <IMG> potrebbe essere:
<IMG SRC="http://www.nome_del_sito/dir1/sottodir2/nome_immagine">
Questa immagine e' allineata: TOP
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: TOP <IMG SRC="home.gif" ALIGN=TOP>
</body>
</html>
Questa immagine e' allineata: MIDDLE
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: MIDDLE <IMG SRC="home.gif" ALIGN=MIDDLE>
</body>
</html>
Questa immagine e' allineata: BOTTOM
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: BOTTOM <IMG SRC="home.gif" ALIGN=BOTTOM>
</body>
</html>
Questa immagine e' allineata: TEXTTOP
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: TEXTTOP <IMG SRC="home.gif" ALIGN=TEXTTOP>
</body>
</html>
Questa immagine e' allineata: ABSMIDDLE
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: ABSMIDDLE <IMG SRC="home.gif" ALIGN=ABSMIDDLE>
</body>
</html>
Questa immagine e' allineata: ABSBOTTOM
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: ABSBOTTOM <IMG SRC="home.gif" ALIGN=ABSBOTTOM>
</body>
</html>
Questa immagine e' allineata: LEFT
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: LEFT<IMG SRC="home.gif" ALIGN=LEFT>
</body>
</html>
Questa immagine e' allineata: RIGHT
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
Questa immagine è allineata: LEFT<IMG SRC="home.gif" ALIGN=RIGHT>
</body>
</html>
Puoi mettere un testo alternativo. Sara' mostrato dal browser web posizionando il puntatore del mouse sopra l' immagine. Puoi farlo tramite il parametro <ALT>:
<IMG SRC="home.gif" ALT="testo alternativo">
Per esempio, metti il mouse sopra questa immagine:
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
<IMG SRC="home.gif" ALT="Questo è un testo alternativo!">
</body>
</html>
Puoi inserire un bordo intorno all' immagine tramite il parametro BORDER. Il valore zero significa senza bordo. Esempio:
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
<IMG SRC="home.gif" BORDER="2">
</body>
</html>
Puoi definire una 'finestra' immaginaria dove sara' posta la tua imagine, tramite i parametri VSPACE e HSPACE. Guarda questo esempio:
Questa e' una semplice riga ditesto, non e' realmente importante, ma la devo scrivere per mostrarti la finestra immaginaria definita dai parametri VSPACE e HSPACE. Infatti, come puoi vedere, questa immagine e' situata al centro di queste righe...
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
<IMG SRC="home.gif" VSPACE="100" HSPACE="50">
</body>
</html>
Puoi specificare le dimensioni dell' immagine tramite i parametri WIDTH e HEIGHT:
E questo e' il sorgente HTML della pagina:
<html>
<head>
</head>
<body>
<IMG SRC="home.gif" WIDTH="100" HEIGHT="60">
</body>
</html>
Nota che la dimensione originale dell' immagine era: width 32 ed height 32...
Puoi costruire una mappa 'cliccabile' cioe' un' immagine che e' sensibile al mouse. Per esempio, potresti costruire una mappa geografica del tuo paese, e potresti piazzare un link differente su ogni regione. O potresti costruire un menu cliccabile. Bene, quando piazzi il puntatore del mouse sopra l' immagine, l' icona del puntatore del mouse cambiera': diventera' una 'manina'...Cio' significa che puoi cliccare su quell' immagine ed andare ad un URL specificato. Comunque, potresti specificare una piccola porzione di immagine, cosi' potresti decidere dove vuoi rendere 'cliccabile' la tua immagine. Per costruire una immagine cliccabile devi usare l' opzione ISMAP:
<IMG SRC="nome" ISMAP USEMAP="#nome_mappa">
Come puoi vedere c' eo un' altra opzione: USEMAP. Tramite questa opzione, puoi specificare il nome di un FILEMAPPA. Un FILEMAPPA e' un semplice file di testo contenente la forma (SHAPE) dell' area cliccabile, e le sue coordinate. Puoi definire un FILEMAPPA cosi':
<MAP NAME="nome_mappa">
<AREA SHAPE="rect" COORDS="n,n n,n" HREF="url">
</MAP>
Dove:
Ok, ora spieghero' COME costruire una mappa cliccabile:
Bene, prima di tutto, devo dirti che ci sono 2 modi per costruire una mappa cliccabile: un metodo lato-server ed un metodo lato-client. Il primo metodo richiede uno script CGI per funzionare, cosi' parlero' del secondo...
Passo 1: definire le coordinate
Prima di tutto devi mettere un' immagine all' interno della tua pagina HTML, poi devi decidere la forma dell' area cliccabile ed infine devi scoprire le sue coordinate. Cosi', costruisci una pagina HTML veramente semplice ed inserisci questa riga al suo interno:
<A HREF=""><IMG SRC="url_immagine" ISMAP></A>
Ora, se apri questa pagina con un browser web, vedrai una 'manina' e potrai vedere le coordinate 'scorrere' nella barra di stato del tuo browser. Bene, prendi un pezzo di carta e scrivi questi numeri. Per esempio: se decidi di creare un' area cliccabile rettangolare (RECTANGLE), devi prendere le coordinate dell' angolo in alto a sinistra e di quello in basso a destra; quindi, punta il mouse sull' angolo in alto a sinistra del tuo rettangolo e scrivi i numeri che vedi; poi vai all' angolo in basso a destra e scrivi i numeri. Bene, hai le coordinate ora!
Passo 2: definire la mappa
Ok, getta via la pagina HTML precedente (l' hai costruita solo per ottenere le coordinate!) e costruisci la tua vera pagina HTML. Cosi':
<html>
<head>
</head>
<body>
<IMG SRC="immagine.gif" ISMAP usemap="#mappa" >
<map name="mappa">
<area shape="rect" coords="1,1,200,70" href="http:/www.....">
</map>
</body>
</html>
Dove 'immagine.gif' e' qualsiasi immagine che preferisci. Ok, e' tutto!
Comunque potresti costruire immagini cliccabili tramite alcuni programmi. Per esempio potresti usare MAPEDIT. Guarda questa meravigliosa pagina di Yahoo!...
Home Pag. prec. Pag. succ. Chi siamo? Scrivici!
Copyright (c) 1998-2006 Wowarea