Jazzing Things Up with Interactive Highlighting

Jazzing Things Up with Interactive Highlighting

If you've used any graphical CD-ROM software application or if you've navigated a DVD menu, you have probably seen buttons that light up or change when your mouse pointer passes over them. This looks cool and gives you some visual feedback before you click something, which research shows can reduce confusion and errorsit makes for more intuitive user interfaces.

By the Way Graphical links that highlight when the mouse pointer is dragged over them are sometimes referred to as hover buttons.

You can add the same sort of visual feedback to the links on your web pages, too. The first step toward achieving that effect is to create the graphics for both the static (dim) and the hover (highlighted) icons. Figure 17.2 shows some icons I created while developing the web site for my company, Stalefish Labs. I made two copies of each icon: one darkened and one illuminated as if it has a green shadow around it, along with highlighted colors throughout the icon.

Try It Yourself

Do you have any pages that would look flashier or be easier to understand if the navigation icons or other images changed when the mouse passed over them? If so, try creating some highlighted versions of the images, and try modifying your own page as you read the following few paragraphs. Here are a few ideas to get you started:

• Use Paint Shop Pro's text tool to make graphical titles that change color when the mouse points to them.
  
  
• Use the Effects, 3D Effects, Buttonize command in Paint Shop Pro with various background colors to make buttons that light up just before they're pressed.
  
  
• Use the techniques you learned in Hour 7, "Creating Your Own Web Page Graphics," to make icons that rotate, wiggle, or blink when the mouse passes over them. (You can use a regular, unanimated GIF for the image to present when the mouse isn't pointing to the icon.)
  
  
• If you have a list of choices, put a blank (totally transparent) image in front of each choice and make an arrow or bullet icon appear in front of the item to which the mouse is pointing.
  
  

Figure 17.2. Five graphics images, each with a highlighted version to replace it when the mouse hovers over it.

Here's how the HTML for a graphical link would look before any scripting is added:

<a href="http://www.stalefishlabs.com/news.html">
<img src="news_static.gif" alt="News" style="border-style:none" /></a>

This should all look familiar to you. (If it doesn't, review Hour 8, "Putting Graphics on a Web Page."

You can add interactive hovering functionality to any link on a web page by including two special attributes called onmouseover and onmouseout. With onmouseover, you tell the web browser what to do when the mouse passes over any text or images within that link. With onmouseout, you indicate what to do when the mouse moves out of the link area.

In this case, you want the image to change to news_hover.gif when the mouse passes over the corresponding link, and then change back to news_static.gif when the mouse moves away. Here's what that looks like in HTML and JavaScript:

<a href="http://www.stalefishlabs.com/news.html"><img
src="news_static.gif" alt="News" style="border-style:none"
onmouseover="this.src = 'news_hover.gif';"
onmouseout="this.src = 'news_static.gif';" /></a>

Notice that you need to enclose the name of the image file in single quotation marks (apostrophes), and enclose the entire piece of JavaScript code assigned to an event attribute in double quotation marks. This is because the JavaScript code is provided as an attribute, and attributes in HTML must be enclosed within double quotation marks. When you enter JavaScript code like this in your own pages, just follow my example closely, substituting your own image names and graphics files.

Listing 17.1 contains the complete HTML code for a web page using the navigation icons from Figure 17.2 as links. You can see how the icons highlight when the mouse passes over them in Figure 17.3 and Figure 17.4, or in the files located at http://www.samspublishing.com/.

Listing 17.1. The JavaScript-Enhanced HTML Code for a Page with Interactive Hover Buttons

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Hover Buttons</title>
  </head>

  <body>
    <h1>Hover Buttons</h1>
    <p>
      Try out these hover "buttons" to see how JavaScript makes hovering just a
      bit more fun.
    </p>
    <hr />
    <p>
      <a href="http://www.stalefishlabs.com/news.html"><img
      src="news_static.gif" alt="News" style="border-style:none"
      onmouseover="this.src = 'news_hover.gif';"
      onmouseout="this.src = 'news_static.gif';" /></a>
      <a href="http://www.stalefishlabs.com/products.html"><img
      src="products_static.gif" alt="Products" style="border-style:none"
      onmouseover="this.src = 'products_hover.gif';"
      onmouseout="this.src = 'products_static.gif';" /></a>
      <a href="http://www.stalefishlabs.com/order.html"><img
      src="order_static.gif" alt="Order" style="border-style:none"
      onmouseover="this.src = 'order_hover.gif';"
      onmouseout="this.src = 'order_static.gif';" /></a>
      <a href="http://www.stalefishlabs.com/goodies.html"><img
      src="goodies_static.gif" alt="Goodies" style="border-style:none"
      onmouseover="this.src = 'goodies_hover.gif';"
      onmouseout="this.src = 'goodies_static.gif';" /></a>
      <a href="http://www.stalefishlabs.com/about.html"><img
      src="about_static.gif" alt="About Us" style="border-style:none"
      onmouseover="this.src = 'about_hover.gif';"
      onmouseout="this.src = 'about_static.gif';" /></a>
    </p>
  </body>
</html>

Figure 17.3. When the mouse passes over the News icon, the television icon lights up and the alternate text appears.

Figure 17.4. When you move the mouse to the Goodies icon, the cupcake is highlighted instead of the television.

Did you Know? You can also use the onmouseover and onmouseout attributes with imagemaps (which were covered in Hour 10, "Graphical Links and Imagemaps"). For an example of a large interactive imagemap, move your mouse cursor around the navigational clock in the files located at the Sams Publishing site at http://www.samspublishing.com/. Peeking at the source code shows you exactly how to incorporate JavaScript commands into an imagemap. Also, don't forget that you can use animated GIFs with scripts too!

You aren't limited to carrying out a single action in the JavaScript code for an event attribute. For example, you could modify multiple images by separating each image assignment with a semicolon (;).