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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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"
/>