Image maps can give your site a visual depiction of its contents for users to follow. While all image maps can look the same, there are a few different ways to construct and implement them. When developing content for our platform that contains an image map, it is critical to understand how the TV browser handles these different constructions.
When discussing the TV 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 TV browser. The browser interprets the hotspots as regular links, and places them in the tabbing order of the selection box. In this case, the image map is transparent to the home viewer; it is integrated into the link structure of the rest of the page. The following is an example:
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 cannot be navigated with the selection box. The TV browser is not able to replace or convert the links to rectangular areas, and the selection box is limited to that specific shape. In this case, navigating the image map is a two-step process.
The user first must select the image map as a whole with the selection box.
When they select it, as they would any other link, the TV browser calls a special program that activates a larger, floating cursor. This cursor interprets the coordinates and allows the user to navigate the map with the arrow keys.
In one way it can be a more precise way to navigate the image map. However, it can also be a slow or tedious process and can very easily create a negative user experience.
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 preceding "client-side, non-rectangular hotspot" example, but has the added disadvantage of not being able to carry JavaScript onmouseover information.