Overcome Blurry Screens With JavaScript

April 28, 1999

Television's basic technology, now over 100 years old, was never meant to display the finer details of Web graphics. Because of the relatively low resolution of a television screen, text in site navigation buttons is frequently difficult to read. This means that if your site uses navigation buttons with small embedded text, your site could be difficult to surf on a television.

While you could avoid this problem with an extensive revision to your site's navigation graphics, such a solution may cost too much time and money. This article details a quick JavaScript fix to make your graphics "surf-worthy" rather than "squint-worthy".

What's Too Small?

Although we can highlight specific examples, we do not yet have a way to reliably demonstrate how specific Web graphics appear when viewed on a television. The clarity of Web graphics will depend on many factors, including the quality of the television, the size of the screen, and the colors used in the image.

The easiest way to ensure readability on television is to use large fonts in your navigational bars. In the examples below, the navigational bar on the bottom uses a large font and remains readable even on a low-resolution television screen (See Figure 2).

Figure 1 - Navigational Bars on a Computer Monitor

Figure 2 - Navigational Bars Displayed on a 17" Television

As a crude rule of thumb, try to keep graphical text over 16 points in size to ensure legibility on a television screen. Legibility is also enhanced by bold text and high contrast between text and background.

JavaScript "onMouseOvers"

Since the inception of JavaScript, sites have used the "onMouseOver" function to spice up Web pages with images that change when a user moves a selection device (mouse, touchpad, or selection box) over them. MouseOvers are commonly used to display status bar text in the lower left of the browser screen.

The status bar is prominent on the WebTV browser, and shows a page's title by default. The bar can hold approximately 35 characters and displays in the default Helvetica font.

Figure 3 - The Status Bar on the WebTV Browser

While flashing text in the status bar may seem superfluous to users viewing your site on a computer monitor, WebTV-based users can find this information a crucial addition to your Web site. If your site relies on small graphics for navigation, simply putting the link's text in the status bar can make a huge difference when your site is viewed on television.

Adding Status Bar Messages to Your Site

Creating status bar messages is simple. The onMouseOver function can be added to image links simply by inserting a little bit of code in the anchor (<a>) tag. The code is a bit weird, so it's best to always copy it from somewhere rather than trying to recreate it each time.

onMouseOver="self.status='Enter Your Text Here';return true" onMouseOut="self.status='';return true"
For example, the image above actually uses the onMouseOver function to display a message in the status bar when the user's cursor moves over it. It uses the following code:
<a href="mouseovers.html"
onMouseOver="self.status='This is as exciting as my day gets.';return true"
onMouseOut="self.status='';return true">
<img src="webStatus.jpg" width="400" height="302" border="0">
Once you have added mouseovers to some of your graphical links, you may want to let WebTV-based users know that they will be able to see additional information in their status bars. You could do this by creating a simple "onLoad" script for your page.
      function helloWebtv()
         if(navigator.userAgent.indexOf("WebTV") != -1)
            alert("WebTV Users: If you have trouble reading our graphics, you may find a description in the status bar on the lower left side of your screen.")
   <BODY onLoad="helloWebtv()">

For only about fifteen minutes of work, the usability of your site on television can be dramatically improved by the inclusion of status bar mouseovers. As cross-platform solutions go, you'll find it's worth the effort.