Inside Technique : Text Hot Spots
By Scott Isaacs

A hot spot is a region on the screen when the user clicks something happens. The most common type of hot spots on a web page are navigation links which bring the user to a new page or part of a document. With the introduction of scripting, instead of navigating, you often want code to execute in response to the user clicking on a hot spot.

In Internet Explorer 4.0, you can respond to clicks on any element by simply attaching an onclick handler to the element. In addition, you can change the cursor to any one of 16 cursors using the CSS cursor property that is supported by IE4. For example, below we turn an ordinary H4 element into a hot spot with a hand cursor when you are over the text^IE4:

  <H4 STYLE="cursor: hand;" 
      ONCLICK="alert('Clicked!')">
    Click Me
  </H4>

Click Me

This solution only works in IE4 since it requires the document object model and full access to your entire document. You can learn more about this approach in our original hot spot article. For Netscape Navigator, the only HTML text elements that can respond to clicks are the link <A>nchor and its close cousin, the <AREA> element. Link elements are <A> and <AREA> elements with an HREF specified. Since IE4 supports clicks on any element, this is a common ground that can be used for defining cross-browser hot spots.

Below we rewrite the IE4 specific example in a cross-browser way. In this example we are using CSS to override the default anchor style and remove the underline.

  <STYLE>
    A.hotspot {text-decoration: none}
  </STYLE>
  <H4>
    <A CLASS=hotspot HREF="#" 
       ONCLICK="alert('Clicked!'); return false">
       Click Me!
    </A>
  </H4>

Click Me!

Returning false to the onclick handler prevents the browser from navigating to the URL specified by the HREF attribute. This is required to ensure the page does not jump or attempt to navigate after the user clicks.

There is still one remaining issue with the above solution - the URL is displayed in the status bar when mouse hovers over the anchor. Since the link is not being used to navigate no URL should be displayed. This is easily fixed by changing the status bar text when the mouse moves over the anchor using the onmouseover and onmouseout events:

  <STYLE>
    A.hotspot {text-decoration: none}
  </STYLE>
  <H4>
    <A CLASS=hotspot HREF="#" 
       ONMOUSEOVER="window.status='Click me now!'"
       ONMOUSEOUT="window.status=''"
       ONCLICK="alert('Clicked!'); return false">
       Click Me!
    </A>
  </H4>

Click Me!

For this to work cross-browser, Netscape requires the ONMOUSEOVER event handler to return true. This return value has no effect in Internet Explorer.

By using link anchors to create hot spots you also get benefits beyond it working cross-browser. The hot spot is included in the tabbing order of the document and for special browsers (eg., speech browsers), the user is notified of the hot spot since it appears as an ordinary link.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.