Jazzing Things Up with Interactive Highlighting
Previous Page
Table of Contents
Next Page

Jazzing Things Up with Interactive Highlighting

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.

icons. Figure 17.2 highlighted colors throughout the icon.

Try It Yourself

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"?>

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

    <h1>Hover Buttons</h1>
      Try out these hover "buttons" to see how JavaScript makes hovering just a
      bit more fun.
    <hr />
      <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>

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!


Previous Page
Table of Contents
Next Page

Приглашаем посетить сайт: Спортивные результаты (http://sport.niv.ru)