InterJinn

Development Framework For PHP

Tag: <jinn:rollover/>

Abstract

This tag is the HTML developer's dream come true for the easy creation of image rollovers for creating navigation buttons. Rollovers make it visually pleasaning for a user to navigate a website and see at a glance where they are. Rollovers are a way to highlight a link or image by switching the current image in the document with another that is usually highlighted in some manner to make it stand out. There are several attributes that control the exact functionality of any rollover you create. Descriptions for these attributes follow.

Attribute - mouseIn

The path to the image to be used when the mouse is over the desired area to be highlighted. If the mouseIn path begins with // then the mouseIn path will be considered relative to the imageBase that you set in the project configuration. If the path is preceded by / then the mouseIn image will be considered relative to the pageRoot that you set in the project configuration. Last, if neither of the former two cases are true then the path will be treated as relative to the current target page.

Attribute - mouseOut

The path to the image to be used when the mouse leaves the desired area to be highlighted. If the mouseOut path begins with // then the mouseOut path will be considered relative to the imageBase that you set in the project configuration. If the path is preceded by / then the mouseOut image will be considered relative to the pageRoot that you set in the project configuration. Last, if neither of the former two cases are true then the path will be treated as relative to the current target page.

Attribute - default

An optional attribute which defines the path to the image to be used when the page first loads and no activity has yet occurred. If you do not set this attribute then it will default to the value set for the mouseOut attribute. If the default path begins with // then the default path will be considered relative to the imageBase that you set in the project configuration. If the path is preceded by / then the default image will be considered relative to the pageRoot that you set in the project configuration. Last, if neither of the former two cases are true then the path will be treated as relative to the current target page.

Attribute - activated

When a user is in the page to which a rollover would normal click, you can use this attribute along with the testActive attribute to have a completely different image display. This attribute should be set to the path of the image to use when the testActive attribute evaluates to true. If you do not set this attribute then it will default to the value set for the mouseIn attribute. If the activated path begins with // then the activated path will be considered relative to the imageBase that you set in the project configuration. If the path is preceded by / then the activated image will be considered relative to the pageRoot that you set in the project configuration. Last, if neither of the former two cases are true then the path will be treated as relative to the current target page.

Attribute - testActive

Optionally set this attribute to a regular expression that will be matched against the current page to determine if the optional activated image should be used for the rollover in the current location. The regular expression will be matched against the current path for the compiled target.

Attribute - action

Destination page to load when the rollover is clicked. If the action path begins with // then the action path will be considered relative to the pageBase that you set in the project configuration. If the path is preceded by / then the action image will be considered relative to the pageRoot that you set in the project configuration. Last, if neither of the former two cases are true then the path will be treated as relative to the current target page.

Attribute - caption (aka status)

Display the value of this attribute in the status field of the window. If this is left empty then the default is browser specific, but is usually the URL of the target page.

Attribute - alt

Set the alt attribute of the image that will be created for the rollover. If this attribute is not set and the status attribute has been set, then this will be set to the same value as the status attribute.

Attribute - noStatusAlt

Prevent the alt attribute from defaulting to the value of the status attribute when the status attribute has been set and the alt has not.

Attribute - testVisible

Optionally set this attribute to a regular expression that will be matched against the target path for the compiled target. If the regular expression does not match then the rollover will not be created. This is useful for putting all of your navigation rollovers in one file and having them compiled in conditionally if the target path is correct.

There are a lot of attributes available to make your button rollovers look and work just right. The following example illustrates some of the attributes described.

Example:
<jinn:rollover
    mouseIn="//buttons/secondary/button_templateJinn_on.png"
    mouseOut="//buttons/secondary/button_templateJinn_off.png"
    testActive="^documentation/templateJinn.php"
    action="//documentation/templateJinn.php"
    status="TemplateJinn"
/>