Confronto fra Immagine Map e Immagini+Tabella HTML

1) Versione con Immagine MAP

La seguente banda grafica è stata realizzata con un Immagine MAP.
C'è una sola immagine e viene utilizzata un'Immagine MAP per delimitare le zone o associare gli hyperlink. Considera l'Immagine MAP come un calco trasparente collocato sull'immagine.
Questa tecnica offre numerosi vantaggi:
- Il caricamento della pagina e la sua pubblicazione sono immediati, perchè il browser deve caricare una sola immagine e quindi ci si può concentrare sull'ottimizzazione della dimensione dell'immagine.
- Il codice HTML è molto più breve rispetto alla versione con una tabella HTML (guarda la versione 2 nella parte inferiore di questa pagina).
- L'inserimento è molto più semplice.
- Il codice HTML è più facile da intrattenere.
- Tutti i browser Internet supportano questa tecnica.

[Guarda l'esempio in un browser indipendente]

2) Versione Immagine+Tabella HTML

La seguente banda grafica è stata realizzata con 31 immagini contenute in una tabella HTML.
Questa costruzione presenta soltanto degli inconvenienti:
- Il browser deve caricare 31 immagini, quindi fare 31 chiamate del server e dà al visitatore un'impressione di lentezza, penalizzando ogni pagina del sito web.
- Non si ottiene un buon effetto visivo, perchè al momento della visualizzazione le immagini appaiono una dopo l'altra.
- Risulta difficile ridefinire (con il ritocco delle immagini) ed effettuare delle eventuali modifiche.
- Il codice è complesso, difficile da mantenere e imponente (e penalizza anche il caricamento di ogni pagina del sito web).

[Guarda l'esempio in un browser indipendente]

<table id="Tableau_01" width="981" height="33" border="0" cellpadding="0" cellspacing="0"><tr>
<td rowspan="10"><img src="Files/12345/image1.jpg" width="320" height="207" alt=""></td>
<td colspan="15"><img src="Files/12345/image2.jpg" width="660" height="51" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="51" alt=""></td></tr><tr>
<td rowspan="2"><a href="javascript:alert('Your Account');"><img src="Files/12345/image3.jpg" width="27" height="28" alt="" border="0"></a></td>
<td colspan="14"><img src="Files/12345/image4.jpg" width="633" height="20" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="20" alt=""></td></tr>
<tr><td rowspan="8"><img src="Files/12345/image5.jpg" width="43" height="136" alt=""></td>
<td rowspan="2"><a href="javascript:alert('Shopping Cart');"><img src="Files/12345/image6.jpg" width="26" height="27" alt="" border="0"></a></td>
<td rowspan="8"><img src="Files/12345/image7.jpg" width="37" height="136" alt=""></td>
<td rowspan="2"><img src="Files/12345/image8.jpg" width="26" height="27" alt=""></td>
<td rowspan="8"><img src="Files/12345/image9.jpg" width="33" height="136" alt=""></td>
<td rowspan="4"><img src="Files/12345/image10.jpg" width="27" height="50" alt=""></td>
<td rowspan="8"><img src="Files/12345/image11.jpg" width="39" height="136" alt=""></td>
<td rowspan="6"><img src="Files/12345/image12.jpg" width="28" height="72" alt=""></td>
<td colspan="6" rowspan="3"><img src="Files/12345/image13.jpg" width="374" height="40" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="8" alt=""></td></tr><tr>
<td rowspan="7"><img src="Files/12345/image14.jpg" width="27" height="128" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="19" alt=""></td></tr>
<tr><td rowspan="6"><img src="Files/12345/image15.jpg" width="26" height="109" alt=""></td>
<td rowspan="2"><a href="javascript:alert('Newsletter');"><img src="Files/12345/image16.jpg" width="26" height="23" alt="" border="0"></a></td>
<td><img src="Files/12345/spacer.gif" width="1" height="13" alt=""></td></tr><tr>
<td rowspan="2"><img src="Files/12345/image17.jpg" width="38" height="18" alt=""></td>
<td rowspan="2"><a href="javascript:alert('About us');"><img src="Files/12345/image18.jpg" width="71" height="18" alt="" border="0"></a></td>
<td rowspan="2"><a href="javascript:alert('Contact us');"><img src="Files/12345/image19.jpg" width="80" height="18" alt="" border="0"></a></td>
<td rowspan="2"><a href="javascript:alert('FAQ');"><img src="Files/12345/image20.jpg" width="47" height="18" alt="" border="0"></a></td>
<td rowspan="2"><a href="javascript:alert('Terms of Use');"><img src="Files/12345/image21.jpg" width="94" height="18" alt="" border="0"></a></td>
<td rowspan="2"><img src="Files/12345/image22.jpg" width="44" height="18" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="10" alt=""></td></tr><tr>
<td rowspan="4"><img src="Files/12345/image23.jpg" width="26" height="86" alt=""></td>
<td rowspan="2"><a href="javascript:alert('Links');"><img src="Files/12345/image24.jpg" width="27" height="22" alt="" border="0"></a></td>
<td><img src="Files/12345/spacer.gif" width="1" height="8" alt=""></td></tr><tr>
<td colspan="6" rowspan="3"><img src="Files/12345/image25.jpg" width="374" height="78" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="14" alt=""></td></tr><tr>
<td rowspan="2"><img src="Files/12345/image26.jpg" width="27" height="64" alt=""></td>
<td><a href="javascript:alert('Shipping information');"><img src="Files/12345/image27.jpg" width="28" height="24" alt="" border="0"></a></td>
<td><img src="Files/12345/spacer.gif" width="1" height="24" alt=""></td></tr><tr>
<td><img src="Files/12345/image28.jpg" width="28" height="40" alt=""></td>
<td><img src="Files/12345/spacer.gif" width="1" height="40" alt=""></td></tr></table>

La successiva banda grafica è identica alla precedente, ma abbiamo forzato il bordo della tabella HTML, in modo da far risaltare le immagini contenute nella tabella. Risultano così evidenti la complessità della costruzione e il numero delle immagini presenti.