How to Create Rollover Buttons in Joomla

There are several ways to create rollover buttons in Joomla!, everything from editing CSS files to using php. However, Joomla! provides several modules in its extensions library that take care of a lot of the coding. These modules make the creation and configuring of rollover buttons much quicker.

Instructions

Simple, Color-change Rollover Buttons

1. Download the Donimedia Select Box Menu module from extensions.joomla.org (see "Resources" below). Upload the module from the "Extensions"-->Install/Uninstall screen from within your Joomla! Administrator interface.

2. Enter the menu items that you'd like to show up in your menu inside the Donimedia Select Box Menu module from within your "Module Manager." You'll find the empty boxes for menu items in the Module Parameters area on the right of the screen.

3. Enter the targets for the links in the URL section beneath the Menu item in the Module Parameters.

4. Enable the module by clicking the "yes" radio button inside the module screen or by clicking on the red circle from within the Module Manager.

Advanced Image Rollovers

1. Download and install the Cassrina Hover Image Menu Module from extensions.joomla.org.

2. Read the documentation that is also linked on the download page. It's important to understand how this module works. For this module, each menu item is a thumbnail (tiny) image. When you roll your mouse over the menu image, a larger version (or different image entirely) of the menu item pops out. You have to create and upload each of these images.

3. Create thumbnail and web-sized versions of each image you'd like to use for this rollover module. Make your menu (thumbnail) images approximately 80 x 50 pixels in size. Make sure to be consistent with these menu items. If you make your first image 75 x 35, make them all 75 x X so that they all line up well in your menu. Make your pop-out images roughly 250 x 150. Again, be consistent. Whatever the thumbnail filename is (filename.jpg, for instance), name the rollover or pop-out image filename_roll.jpg.

4. Upload the images to yourdomain/joomlasubdirectory/images/stories. You can FTP them there or login to CPanel, go to your file manager, and do it from there.

5. Enable the Cassrina Module and the menu should appear where you position it.

Tips & Warnings

• Some Joomla! Templates come with rollover buttons pre-installed. If you don't like configuring modules, that might be a better choice.

References

• Joomla: Popup Text on Rollover

Resources

• Read this Article in Spanish
• Donimedia: Select Box Menu Module
• Joomla: Cassrina Hover Image Menu