How to Create a Pseudo Image-map
Below is the image-map effect you get when slicing an image into its component parts and use an HTML table to reassemble the pieces. This can help
- make pages appear to load more quickly
- make it easier to implement JavaScript rollovers
BTW, don't click on the links - this is only an example.
The end result
 |
 |
 |
|
 |
|
The HTML
If you View | Source, you will see this HTML:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="2"><a href="soup_de_la_jour.cfm"><img src="slice1.gif" alt="first link" width="146" height="71" border="0"></A></td>
<td><a href="desert.cfm"><img src="slice2.gif" alt="second link" width="154" height="30" border="0"></a></td>
</tr>
<tr>
<td><a href="the_cheese_board.cfm"><img src="slice3.gif" alt="third link" width="154" height="41" border="0"></a></td>
</tr>
<tr>
<td colspan="2"><a href="maincourse.cfm"><img src="slice4.gif" alt="fourth link" width="300" height="29" border="0"></a></td>
</tr>
</table>
<tr>
<td rowspan="2"><a href="soup_de_la_jour.cfm"><img src="slice1.gif" alt="first link" width="146" height="71" border="0"></A></td>
<td><a href="desert.cfm"><img src="slice2.gif" alt="second link" width="154" height="30" border="0"></a></td>
</tr>
<tr>
<td><a href="the_cheese_board.cfm"><img src="slice3.gif" alt="third link" width="154" height="41" border="0"></a></td>
</tr>
<tr>
<td colspan="2"><a href="maincourse.cfm"><img src="slice4.gif" alt="fourth link" width="300" height="29" border="0"></a></td>
</tr>
</table>
The Individual Images
These are the separate images that are bound together using the HTML table above:
|
|
|
|
Important points to note:
- The cellpadding="0" cellspacing="0" removes all the space normally present between the table's cells. This allows the images to fit snugly together with no gap.
- The border="0" attribute in the TABLE tag removes the default border from a table.
- The width and HEIGHT attributes for the img tag are given. This helps the browser to render the page slightly faster, as it can allocate space for the image on the page.
- The border="0" attribute in the IMAGE tag prevents the default blue border appearing around an image that is a link.
- The closing anchor tag, </a>, is immediately after the image - no spaces or carriage-returns in-between. This is essential, as a space here will be treated as anywhere else, and displayed.