Image Cutting
An Alternative to Imagemaps

On TV browsers which do not have a smooth-scrolling or "mouse-like" input device, it may be desirable to avoid Imagemaps. However, you can still use "hot" links within an image by cutting it into parts, each of which can have its own <A HREF>. The pieces are then "fused" together within a <TABLE>.

In this example, the table is made up of three rows, with three pieces in the middle row. Only the word "geek" has a link:

<a href="geekclick.htm"><img src="geek.gif"></a>


Because the middle row has three <TD> cells, the top and bottom rows each must have COLSPAN=3. The table layout is as follows:

.
..
.

However, even if the positioning of the table cells is correct, there may be one more necessary adjustment to your HTML. For some browsers (such as Netscape), you must ensure that there are NO spaces or line breaks in the table cells that contain the image pieces. Although WebTV handles this gracefully, less forgiving TV-Web browsers may repeat the Netscape error, resulting in gaps which ruin the image:

The code for the middle row in the first case looks like this:

<tr><td><img src="mid-left.gif" width=121 height=55></td><td><a href="geekclick.htm"><img src="geek.gif" border=0 width=72 height=55></a></td><td><img src="mid-right.gif" width=59 height=55></td></tr>

In the second case, the only difference is the presence of line breaks:

<tr><td>
<img src="mid-left.gif" width=121 height=55>
</td>

<td>
<a href="geekclick.htm"> <img src="geek.gif" border=0 width=72 height=55></a>
</td>

<td>
<img src="mid-right.gif" width=59 height=55>
</td></tr>

So, contrary to popular belief, the formatting of your actual HTML code CAN affect the apperance of your pages. In this case, it can literally make or break your page.

sponsored and designed by
Iacta Interactive