Image Swap Rollover Menu Doc

Written by Nicholas Myrna Thursday, 03 February 2011 10:43

Install the Image Swap Rollover Menu module as a Joomla module using the regular installation process. Once installed, configure the module as shown below. All image swap modules work the same in terms of admin parameters shown below. For image swap modules that have only one image set, the set up is the same as shown below for the first image set. The Image Swap Rollover Menu simply has multiple additional image sets.

Module Configuration Parameters

1) Folder - set the pathway here for your images folder. Only set this as a link relative to your Domain URL. For example, if my domain name is "corshops.com" and my images to use for this module are located here "http://www.corshops.com/images/rollover" then I would set my Folder as shown above to "images/rollover." Do not put either a leading or trainling slash.

NOTE: Be careful with subfolders. If you Joomla install is in the a sub directory such as "http://www.corshops.com/joomla" then your path would be "joomla/images/rollover"

2) Override Width in Pixels - Set this value if you want the module to force all images to be the specified width. Enter a number of pixels only, with the "px." The height is proportionally adjusted to match this width. Do not use if you want your images to render different sizes.

3) Orientation - Do you want the module to display horizontally or vertically?

4) Pixels for right spacing - Only used for horizontal layout. By default, the module has no spacing between images. If you would like your images to touch in a horizontal module orientation, then do not enter any value here. Otherwise, enter the space in pixels to be placed on the right of each image to separate it from the next image in the module.

5) Pixels for top spacing - Only used for vertical layout. By default, the module has no spacing between images. If you would like your images to touch in a vertical module orientation, then do not enter any value here. Otherwise, enter the space in pixels to be placed at the top of each image to separate it from the next image in the module.

Image Configuration Parameters

This Image Swap Rollover Menu module supports up to 10 separate image sets (Default Image, Roll over image, After Mouse Image). All of them are set up the same as the first one which is documented below. The Image Swap Module and Image Swap Module with Lightbox have only one image set, which is set up the same as shown below for the first image set.

1) Onclick URL - Enter the URL that the image should link to. Do not enter http:// If you choose to set this value to an email address, enter it here.

2) Open a New Window - When the user clicks on the image, should the URL load in a new window or the current one? Enter "Y" for new window, enter "N" to use the same window. A value of M sets the link action as a "Mail To" command rather than a URL. If this is set to "M" then enter the email address for use instead of a URL.

3) Image Alternate Text - Enter a description of the image. Hint: This can help your SEO.

4) Image Title - Enter a title for the image. Hint: This also can improve your SEO.

5) Default Image Name - The filename of the image to load as the default image for this set. enter only the filename. It should be located in the image directory specified in the module paramaters.

6) Mouseover Image Name - The filename of the image to load when the user mousesover the default image. This image can be larger than the default image to get popout effect. It should be located in the image directory specified in the module paramaters.

7) After MouseImage Name - The filename of the image to display after the user moves the mouse off the image set. This can be the same as the default image, or it can be a different image.

Using this Module

This module can be loaded in a module position to work like a graphical menu. It can also be loaded in content using one of the plugins available for Joomla to load modules on demand. The default version of this is the loadposition Joomla plugin which is in all Joomla installs, and was used on our site to load the module in Virtuemart Shopping Cart product description.