Adding Rollovers to Your Pages - HTML 4

If you are new to HTML, a rollover probably sounds like a pet trick. But, in actuality, a rollover is perhaps the most common use of DHTML on the Web. A rollover brings your Web page to life when a mouse hovers over an image or text.

Image rollovers with JavaScript
If all JavaScript scripts went to school, the image rollover would certainly be the BMOC, the Big Man on Campus. It’s definitely the most popular use for JavaScript. Without image rollovers, your image buttons look dull and drab; visitors to your site might even assume that your buttons aren’t actually live links if those buttons don’t change in some fashion when a cursor moves over them. But, with image rollovers, your pages let loose a dash of adrenaline with each mouse hover.

Consider the two-states of the image rollover shown in Figures:

  • Figure shows a button in its inactive (off) state.
  • Figure : A very simple button.

    A very simple button.

  • Figure shows the same button when the cursor is moved over it. That’s the active (on) state.
  • Figure : A very simple button with the cursor over it.

    A very simple button with the cursor over it.

Listing shows the code for a JavaScript image rollover.

Listing : JavaScript Image Rollover

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>JavaScript Image Rollover</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<script type=”text/javascript” language=”javascript”>
function chgImg(imgField,imgState) {
document[imgField].src = “images/” + imgField + imgState + “.gif”
}
</script>
</head>
<body>
<a href=”index.html” onmouseover=”chgImg(‘homeButton’,’On’)”
onmouseout=”chgImg(‘homeButton’,’Off’)”>
<img src=”images/homeButtonOff.gif” width=”65” height=”15”
border=”0” alt=”Go Home” name=”homeButton” /></a>
</body>
</html>

he images subdirectory holds two separate image files with identical dimensions:

  • omeButtonOff.gif appears when the button is in the off state (when the page loads).
  • homeButtonOn.gif appears when the button is in the on state (when the cursor is over the button).

If you want to add JavaScript rollovers to your existing Web page, follow these steps:

  • Decide on an attribute name for the rollover button.
  • You want to give each button a unique name. For example, if you have a button for an About page, you might call it aboutMeButton. Call a button linked to your Home page homeButton.
  • Create your button images in your favorite image-editing application.
  • You need two identically sized images for each button.
  • Name the On and Off button image files with the attribute.
  • For example, the aboutMeButton button needs two image files: aboutMeButtonOn.gif
    aboutMeButtonOff.gif
  • Put the button image files into an images subdirectory under the directory of the page that will contain the rollovers.
  • Add the JavaScript code in Listing to your page.
  • That’s everything between (and including) the <script> and </script> tags. It goes inside the <head> tags at the top.
  • Add the off versions of each image to your page.
  • Add the name attribute to each <img> tag on your page.
  • Surround each <img> tag with an <a href> </a> tag.
  • Add these event handlers to each <a href> tag:

Add the following attributes to use homeButton:

Next, add these attributes to use aboutMeButton:

With this image rollover script, note the following behavior:

  • For dialup visitors to your Web site, this rollover script takes a moment to download the active image file the first time the visitor hovers the mouse over the image.
  • However, you can preload the active states of your images; that is, tell JavaScript to load all the on versions of your buttons when the page initially loads. This technique enables your page to instantaneously swap between images when rolled over. Listing shows the added code to preload the images.

    Recent versions of Microsoft Internet Explorer (5.x and 6.x) contain a bug that can make preloading ineffective. Under certain circumstances, the browser will ignore images already downloaded into your local cache and instead request the image all over again each time a visitor moves the mouse over the rollover image. If you encounter this problem, consider a text rollover instead, which is discussed in the “Text rollovers with CSS” section later in this chapter.

  • This script depends on the buttons having particular names; if you want more flexibility, the code has to be written to handle it.
  • This script causes trouble with certain ancient browsers, particularly Netscape versions 1 and 2 and Internet Explorer versions 1, 2, and 3.

Listing : Enhanced JavaScript Image Rollover with Preloader

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>JavaScript Image Rollover</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<script type=”text/javascript” language=”javascript”> //Preloads images
if (document.images) {
homeButtonOn = new Image
homeButtonOff = new Image
homeButtonOn.src = “images/homeButtonOn.gif”
homeButtonOff.src = “images/homeButtonOff.gif”
} function chgImg(imgField,imgState) {
document[imgField].src = “images/” + imgField + imgState + “.gif”
}
</script>
</head>
<body>
<a href=”index.html” onmouseover=”chgImg(‘homeButton’,’On’)”
onmouseout=”chgImg(‘homeButton’,’Off’)”>
<img src=”images/homeButtonOff.gif” width=”65” height=”15”
border=”0” alt=”Go Home” name=”homeButton” /></a>
</body>
</html>

Text rollovers with CSS
For years, the only option available for creating a rollover effect was to create button images and then “activate” them using JavaScript (as discussed in the “Image rollovers with JavaScript” section previously). However, as CSS has finally gained acceptance with the newer versions of browsers, you have an alternative way to create rollovers without using any images at all.

Text rollovers have advantages and disadvantages when compared to JavaScript image rollovers:

  • Good news: Text is faster and more meaningful to search engines, and it’s always easier to just add text to a page than it is to create two images and then add them to a page, as with an image rollover. Plus, you don’t need to worry about preloading your images.
  • Bad news: Although you can control the text font, style, and border, you can’t do all the nifty visual tricks that you can with images, such as antialiasing. In addition, this method works only in reasonably current browsers. (However, if your target viewing audience uses a browser that was released in this century, you should be fine.)

One of the following figures shows a plain-Jane Web page with two rollover text links: Home and About Me. Moving the cursor over one of the images, as shown in Figure , causes the rolled-over version of the text to display. Listing displays the HTML and CSS required for this rollover effect.

The page can still display whether you’ve visited the linked page or not. One of the following figures shows how the page appears after you’ve been to this site’s home page. And although that image is grayed out, it’s still a link, so rolling over it still gives the same effect as in One of the following figures.

Figure : A page with text rollovers handled with CSS.

Figure : Moving the cursor over the link text changes the text and background colors.

A page with text rollovers handled with CSS.

Listing : A Text Rollover with CSS

<<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>CSS Text Rollover</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<style type=”text/css”>
h4 {font: 18px geneva, sans-serif; margin: 0; color: #000;
background: #FFF;}
a {text-decoration: none;} div#navbar {width: 100px;}
div#navbar a {display:block; margin: 0; padding: 0.3em;}
div#navbar a:hover {background: #FFF; color: #000;}
div#navbar a:link {color: #000; background-color: transparent;}
div#navbar a:link:hover {color: #FFF; background: #000;}
div#navbar a:visited {color: #CCC; background-color: transparent;}
div#navbar a:visited:hover {color: #CCC; background: #000;}
</style>
</head>
<body>
<div id=”navbar”>
<h4><a href=”index.html”>Home</a></h4>
<h4><a href=”aboutMe.html”>About Me</a></h4>
</div>
</body>
</html>

In this example, we’ve made the text change from black on white to white on black when the cursor hovers over the link so that it’s easy for you to see what’s going on in the black-and-white figures. You likely want your site to use a more colorful approach.

Adding this type of navigation to your site couldn’t be simpler:

1. Within the <head> tags, add the preceding code inside and including the <style> and </style> tags.
2. Add links inside individual <h4> tags.
3. Make sure that the entire menu is inside a <div> tag with an id attribute of navbar.

If you add the CSS to your site via a link to a site-wide external style sheet, you can add, change, or delete menu bar links on your site at any time without having to touch a single line of CSS or JavaScript. You simply add or modify your <a href> tags. Slick, huh?


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics