Joomla! Documentation™

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

Because I get so many emails asking for help on this topic I'll better edit this page to save me some work.

First of all: No more code changes to php files are needed for this. Displaying images for menu items is standard in newer joomla releases.

And here's the solution to get an real rollover image - CSS only - menu:

1. Upload a blank 1x1 pixel gif file to your images/stories folder. (' blank' means transparent. Usually, people take a 1 pixel transparent gif file.)
2. Edit your menu in backend. Click the menu item you want to edit.
3. Open the system parameters of this menu item and change the menu image for this item to the transparent image you uploaded before.
4. Repeat steps 2 and 3 for every menu item you want to replace with an image.
5. Preview your site. Alle menu items should appear empty now. But dont worry we'll fix this now.
6. Open the template.css file of your template. If you use the template edit function in the joomla backend check if the file is writeable first!
7. Now we need to define the "real" images as background images for our items as CSS rules.

Here's an example:

#pillmenu li.item28 a {
  width: 31px;
  height:28px;
  background: url(../images/home.png) 0 0 no-repeat;
}

#pillmenu li.item28 a:hover {
  background: url(../images/home-over.png) 0 0 no-repeat;
}

Thats it. In my example I use item28 because 28 is the itemId property of my menu item. You can see the itemIds when you open your menu in the backend.

You hav to enter these rules for every menu item you want to style. We use one rule for the normal state and another one for the hover state.

Of course you could use a third special image for the currently selected item too. Then you would just use a third rule like this:

#pillmenu li#current.item28 a {
  background: url(../images/home-current.png) 0 0 no-repeat;
}

That image would not change on hover! You would need a fourth rule if you want to change that too on rollover!

#pillmenu li#current.item28 a:hover {
  background: url(../images/home-current-over.png) 0 0 no-repeat;
}

The final result is a nice rollover image menu without any line of javascript or an additional module :)

I provided an example page with an out of the box Joomla 1.5.14 install. You can see it here.

I modified the "pillmenu" on top of the page. That's why used #pillmenu in my CSS rules. I you want to mod another menu you will have to use the ID of its container div. Have a look at the HTML source of your template to find it out.

Feel free to contact me if you like this little hack or have any questions.