Precedente
BACK

HTML HOUSE

IMMAGINI MAPPATURA,
EFFETTI, CONSIGLI

Successiva
NEXT


Anche le immagini, come le parole, possono diventare collegamenti ad altre pagine Web o siti, aggiungendo la stessa dicitura e cioè:
<A HREF="index.htm">
<IMG SRC="../imm/foto.jpg">
</A>
CLICCA QUI PER LA DIMOSTRAZIONE
In questa maniera l'immagine foto.jpg diventa un collegamento a index.htm, cioè cliccando sopra l'immagine si aprirà la nuova pagina Web Index.htm. Se avete provato l'esempio avrete notato intorno all'immagine c'è un bordo colorato che non ha a che fare con l'immagine: questo indica che l'immagine è un collegamento. Esiste la possibilità comunque di eliminarlo scrivendo:
<A HREF="index.htm">
<IMG SRC="../imm/foto.jpg" BORDER="0">
</A>
CLICCA QUI PER LA DIMOSTRAZIONE
In questa maniera avete eliminato il bordo. Adesso possiamo parlare della mappatura. Mappare significa che alcune parti dell'immagine, se non tutte, sono collegamenti ad altri siti o a pagine Web. Questo significa che potete attivare più collegamenti con un'immagine sola. Ma vediamo come si fà:
<IMG SRC="../imm/foto.jpg" BORDER="0" USEMAP="#foto">
<MAP NAME="foto">
<AREA SHAPE="rect" COORDS="14,21,56,78" HREF="index.htm">
<AREA SHAPE="circle" COORDS="53,78,98" HREF="html.htm">
<AREA SHAPE="polygon" COORDS="56,7,89,34,34,33,45" HREF="house.htm">
</MAP>
CLICCA QUI PER LA DIMOSTRAZIONE
Alla nostra immagine aggiungiamo la dicitura USEMAP in cui inseriamo il nome che vogliamo dare alla nostra mappa preceduto dal simbolo #. A questo punto in un'altra parte del documento, che non deve essere necessariamente quella subito dopo il TAG dell'immagine, dobbiamo inserire le coordinate della mappatura e quindi scrivere il TAG MAP con l'attributo NAME per dare il nome alla mappa (nel nostro caso foto), dopo di che si aggiungono le coordinate dell'area utilizzata come collegamento, che può essere un rettangolo, un cerchio, o un poligono, nel primo caso bisogna mettere le due coordinate dell'angolo sinistro alto (prima le X e poi le Y), poi quelle dell'angolo destro basso. Per il cerchio invece bisogna inserire le coordinate del centro del cerchio e dopo il diametro in pixel. Infine la poligonale serve per le figure irregolari, e allo stesso modo dei rettangoli e dei cerchi bisogna inserire tutte le coordinate sempre prima le X e poi le Y. Fatto questo bisogna inserire l'attributo HREF con il collegamento al documento HTML da raggiungere, nel nostro caso l'area del rettangolo porta a INDEX.HTM, il cerchio porta a HTML.HTM, e il poligono porta a HOUSE.HTM.

Ora sapete anche mappare le immagini, ma voglio dare alcuni consigli utili; prima cosa ridurre le dimensioni in byte delle immagini, cosa molto utile per farle caricare più velocemente su internet. Se avete un'immagine molto colorata e con una buona definizione l'unica soluzione è utilizzare il formato JPG, mentre se la risoluzione è bassa è consigliabile utilizzare GIF; inoltre in molti software di grafica c'è la possibilità di contare i colori e ridurli al minimo per poi salvarli in formato GIF.
Inoltre un'altra possibilità è quella di aumentare la compressione del formato JPG. Questo diminuisce la risoluzione ma anche i Byte: è da valutare come risulta poi l'immagine alla fine. (rapporto QUALITA/COMPRESSIONE dell'immagine)
Altre possibilità che si hanno è di inserire immagini con sfondo trasparente, e immagini animate che ormai sono frequentissime nei siti di tutto il mondo. Per le prime basta cercare nei programmi di grafica la dicitura SELECT TRASPARENT PALETTE o altre frasi simili, selezionare questa opzione e ottenere così l'effetto desiderato. Per le immagini animate invece ci sono particolari software che le creano; basta avere un'immagine in formato GIF e dopo aggiungere l'animazione che può essere già pronta sul software o la puoi direttamente gestire tu.

Un mio consiglio è quello di aggiungere immagini ma senza esagerare perchè rende lento il caricamento del sito, l'utente si stanca di aspettare e il risultato sono ... pochi visitatori. Consiglio inoltre di non eccedere nell'inserimento di immagini animate altrimenti la concentrazione viene fissata sulle immagini e non sul contenuto effettivo del vostro sito.

Precedente
BACK
Successiva
NEXT