Joomla 1.5 Main Menu Images Module
This module enables you to create a main menu with images only.
Following the success of the original version of Main Menu Images module for Joomla 1.0, this version is a hack of the 1.5 menu module, which allows images in menus without any text.
Download
Installation
To install the module, simple go to Extensions Install / Uninstall, choose the file you have downloaded above and click on the Upload File and Install button.
Compatibility
This module has been written for Joomla 1.5 and thus supports Joomla 1.5 natively.
Configuration
Configuration of the module is done via Extensions > Module Manager. Click on the Joomla 1.5 Main Menu Images item. You will need to enter the images for the menu item when creating the actual menu items. The only configuration necessary at the module level will be the menu to display, and the normal module parameters such as position and ordering. There is also an option which allows you to hide the bullets. The only layout supported by this module is the List layout. Legacy layouts are not supported.
Example Setup
Configuration happens in three steps.
1. Upload the images you want to use to the stories folder via the Media Manager
2. Click on the menu which you want to replace with main menu images
3. Choose the picture you want to diplay from the images you have uploaded in the Menu Image parameter
4. In the Module Parameters (Extensions > Module Manager > JoomlaMain Menu Images) choose the menu you want to display in the module.
The end result after you do this for each menu item is the following:
Screenshot
Please do vote for us or write a small review on the Joomla Extensions site if you like this module:
http://extensions.joomla.org/extensions/core-enhancements/menu-systems/image-menus/3675/details
Hover Images
The module now supports easy configuration of the hover images. We are know including a javascript file which when enabled, will enable hover images.
The images possible are now:
1. Normal Image
2. Hover Image
3. Active Image
4. Active Hover Image
To enable the menu you need to add the following lines to the <head> section of the index.php of the template you are using.
<?php
$document = &JFactory::getDocument();
$document->addScript( 'modules/mod_j15mainmenuimages/imgchange.js' );
?>
Now in the same folder where there is your original image, you need to create the additional three versions of the image, and give them the exact following names:
1. Normal image: image.jpg
2. Hover image: image-hover.jpg
3. Active image: image-active.jpg
4. Active hover: image-active-hover.jpg
If you don't want any one of the images, simply create the image with that name, but put the normal image. This ensures that there isn't any error. The menu style must be list, and if you want active highlighting, Full Active Highlighting must be on in the paramters of the module.
Change Background On Mouse Over
Changing the image when passing the mouse over the image is not strictly possible (currently). However, to achieve a similar effect, it is possible to change the background of the image using CSS.
The following is an example:
li.item55:hover {
img:url(/images/stories/otherbackground.jpg); }
The above entry in the stylesheet will create an effect on the li with class "item55" will achieve the on mouse over background effect. You'd need to create an entry in the stylesheet for each menu item which you want this effect on.
Do you like this module? - Buy me a beer (€3)
If you liked this module, please consider buying me a beer  Every drop counts! No guarantees that any donations will be spent on new development rather than beer, though every effort will be made to spend all donations on new developments 
|
