Seamless Image Maps

June 3, 1999

Image maps can be confusing for novice Web surfers. Many users don't realize that certain parts of an image map can be clickable while others are not. The WebTV browser, on the other hand, seamlessly integrates image maps into the page navigation so image hotspots appear as regular links. However, certain types of image maps don't integrate well and can appear cumbersome with a WebTV browser. A moment or two spent analyzing your image maps will ensure that WebTV-based users can easily navigate your site.

If you're not familiar with the WebTV browser "selection box", read about how WebTV-based users navigate Web sites.

How Image Maps Appear With the WebTV Browser
While all image maps might look identical to computer users, Web designers know that there are different ways to implement an image map; the WebTV browser can react differently to those implementations.

When discussing the WebTV browser, there are three types of image maps to consider:

  • Recommended Client-side image map, rectangular hotspots: A client-side image map (hotspots are defined in the .html file) with rectangular hotspots is the best type of image map to use for a WebTV browser. The hotspots will appear as regular links, clickable with the user's selection box. In this case, the image map is transparent to the WebTV-based user.

    Rectangular hotspots in a client-side image map appear as regular links.

  • Not Recommended Client-side image map, non-rectangular hotspots: A client-side image map with polygonal or circular hotspots can not be navigated with the selection box, as the hotspots are not rectangular. In this case, navigating the image map is more difficult for WebTV-based users: they must first select the image map as a whole, then navigate it with a cursor controlled by the arrow keys.

    Circular or polygonal hotspots force less precise navigation.
    The image map is navigated with a cursor controlled by the arrow keys.

    This method of navigation is much slower and less precise than the selection box to which WebTV-based users are accustomed.

  • Not Recommended Server-side image map: A server-side image map (hotspot information is stored in a .map file on the server) acts in the same way as the "client-side, non-rectangular hotspot" example above, but has the added disadvantage of not being able to carry JavaScript onMouseOver information. If you are not familiar with how JavaScript onMouseOvers can greatly enhance your site's usability with the WebTV browser, read Overcome Blurry Screens with JavaScript.

Note - Behavior of <input type=image>

Image maps can also be part of forms - by using the <input type=image> tag. When the image is clicked, this tag passes along to the server the x and y coordinates of that click. However, pages that use this tag rarely use it for image maps - most use it to create a graphical submit button on the form.

The WebTV browser has no sure way of knowing if the image is being used as a graphical submit button or as an image map, and optimal behavior is different for each. To approximate authors' intent, the WebTV browser will act differently according to the size of the image. Images larger than 97 by 65 pixels are assumed to be image maps; WebTV users are then prompted with the "two-click cursor" as in the example above. Images smaller than 97 by 65 pixels are assumed to be graphical submit buttons; the user is not presented with any way to select different parts of the image, only the image as a whole.

If you would like to use a button larger than the dimensions above to submit your form, you can do so using JavaScript.

    <a href="javascript:document.formName.submit()"><img src=myImage></a>