The mgiRollOver Tag

Tag Behavior

Use the mgiRollOver tag to display Javascript roll over (mouse over) images.

Tag Syntax

The mgiRollOver tag has two modes. Each mode has different required and optional parameters. The modes of mgiRollOver are:

  • head - Creates the Javascript required for the roll over function.
  • image - Specifies which roll over image to display.

Head Mode

The head mode of the mgiRollOver tag has three required parameters and two optional parameters. The tag form is:

<mgiRollOver mode="head" rollOverNames="Name List" 
rollOverImages="File Names" baseURL="File Location" 
delimiter="Character">

Required Parameters:

  • mode - The mode is the function of the mgiRollOver tag. In "head" mode, the mgiRollOver tag creates the Javascript required for the roll over function.
  • rollOverNames - The rollOverNames parameter is the delimited list of names that refer to each set of roll over images. The order of the names in the rollOverNames parameter must match the order of images listed in the rollOverImages parameter. The number of names listed in the rollOverNames parameter must also match the number of images listed in the rollOverImages parameter. The rollOverNames should be delimited by a comma (default) or by the character listed in the delimiter parameter.
  • rollOverImages - The rollOverImages parameter is the delimited list of image file names. The list should contain only file names and should not contain full file paths (use the optional baseURL parameter to specifiy a file path). These images are the roll over images (i.e., the images that display after you mouse over each image listed in the "image" mode of the mgiRollOver tag). All roll over images should reside in the same folder. The order of the image file names in the rollOverImages parameter must match the order of the names in the rollOverNames parameter. The number of image files listed in the rollOverImages parameter must also match the number of names listed in the rollOverNames parameter. The rollOverImages should be delimited by a comma (default) or by the character listed in the delimiter parameter.

Optional Parameters:

  • baseURL - The baseURL parameter is the absolute URL to the folder that contains the image files listed in the rollOverImages parameter. By default, images are referenced in the same folder as the page containing the mgiRollOver tag.
  • delimiter - The delimiter parameter is the character that separates each name and image in the rollOverNames and rollOverImages parameters. The default delimiter is a comma.

Image Mode

The image mode of the mgiRollOver tag has four required parameters and six optional parameters. The tag form is:

<mgiRollOver mode="image" name="RollOver Name" 
image="Image Path" height="Image Height" 
width="Image Width" border="Image Border" 
URL="Image Link" target="Link Target" alt="Name" 
message="Display Message">

Required Parameters:

  • name - The name parameter is the name of the roll over set to display. The name must match a name listed in the rollOverNames parameter in the "head" mode of mgiRollOver.
  • image - The image parameter is the absolute or relative path to the base image file to display. The base image file displayes until the roll over function is activated by the cursor moving over the base image.
  • height - The height parameter is the height of the base image.
  • width - The width parameter is the width of the base image.

Optional Parameters:

  • mode - The mode is the function of the mgiRollOver tag. In "image" mode, the mgiRollOver tag specifies the image and roll over image to display. "Image" is the default mode of the mgiRollOver tag.
  • border - The border parameter is the size of the base image's border. The default border is "0" (zero).
  • URL - The URL parameter is the URL of the page the roll over links to when clicked. By default, the image is not linked.
  • target - The target parameter is the target of the link listed in the URL parameter.
  • alt - The alt parameter is the alternative label for the base image (i.e., the label that displays if an image does not load or the visitor has images turned off on the browser).
  • message - The message parameter is the text that appears in the status bar of the browser when the roll over is activated.

Example Usage and Output

The head and image modes of mgiRollOver must both be used in order for the roll over function to work properly. Enter one mgiRollOver tag in head mode between the HTML <HEAD> tags. The mgiRollOver tag in head mode should not be placed between <SCRIPT> tags. Next, enter one mgiRollOver tag in image mode for each roll over you wish to display. The following is a simple example using both modes of mgiRollOver.

<html>

<head>

<title>Rollovers by MGI</title>

<mgiRollOver mode="head" delimiter=","
rollOverNames="about,service,contact"
rollOverImages="abOver.gif,servOver.gif,conOver.gif" 
baseURL="http://www.domain.com/images/">

</head>
    
<body>

<mgiRollOver mode="image" name="about" 
alt="About Us" message="Information About Our Company" 
image="about.gif" height="32" width="64" 
border="0" url="about.mgi"><br>

<mgiRollOver mode="image" name="service" 
alt="Services" message="Service Details and Pricing" 
image="service.gif" height="32" width="64" 
border="0" url="service.mgi"><br>

<mgiRollOver mode="image" name="contact" 
alt="Contact Us" message="Phone, Mail and Email Info" 
image="contact.gif" height="32" width="64" 
border="0"><br>

</body>

</html>

Suggested Usage

  • Roll over images

[Understanding MGI Menu] [Using MGI Menu] [Referencing MGI Menu]

[MGI Guides Main Menu] [User Guide Main Menu]