Rollover v1.1

Unobtrusive Image Rollover with Prototype Library.

by Herryanto Siatono

Example

How to Use

  1. Copy prototype.js and rollover.js to your javascript directory.
  2. Create a link to the javascript files from your HTML page. 
      <script type="text/javascript" src="javascripts/prototype.js"></script>
  <script type="text/javascript" src="javascripts/rollover.js"></script>
  3. Create the rollover images and append '_over' to the image name. If you would like to show a different style for the selected image, identify with '_sel' suffix. Refer to the Option section below for more information.
  4. Write the HTML codes to display links to images with rollover effect, and assign an id to its parent container. 
      <ul id="nav">
    <li><a href="#"><img src="images/home_sel.gif" width="69" height="13" alt="Home" /></a></li>
    <li><a href="#"><img src="images/about_us.gif" width="90" height="13" alt="About Us" /></a></li>
    <li><a href="#"><img src="images/products.gif" width="153" height="13" alt="Products & Services" /></a></li>
    <li><a href="#"><img src="images/news.gif" width="69" height="13" alt="News" /></a></li>
    <li><a href="#"><img src="images/contact_us.gif" width="101" height="13" alt="News" /></a></li>
  </ul>
  5. Apply the unobtrusive rollover effect on page load. 
      <script type="text/javascript">
    window.onload = function() {
      new Rollover('nav');
    }
  </script>
    Or call it from the body tag onload event: 
      <body onload="new Rollover('nav');">

Options

By default, Rollover javascript assumes rollover image name has _over suffix, and the selected image has _sel suffix. Example: 

      about_us.gif

      // Rollover image
      about_us_over.gif

      // Selected image
      about_us_sel.gif

If you don't like the naming convention, you can change them by passing the following options when initializing the Rollover object.

Example:

  <script type="text/javascript">
    window.onload = function() {
      new Rollover('nav', {suffixSeperator: '-', rolloverSuffix: 'hover',
        selectedSuffix: 'active'});
    }
  </script>

Download