Joomla Main Menu Images Module | ![]() | ![]() | ![]() |
Joomla Main Menu Images ModuleThis module enables you to create a main menu with images only. Funnily enough, we were recently doing a site and realised that you if you choose to display images in the main menu, you still get the text content of the menu. To have you main menu display images only, you need to perform a small hack on the main menu module. The original main menu module has been changes slightly to create this module. DownloadPlease Register and Login to download this module.Joomla 2.5 / 3.0Joomla 1.5InstallationTo install the module, simple go to Installers > Modules, choose the file you have downloaded above and click on the upload and install button. CompatibilityThere are three versions of this module, one for Joomla 2.5 and 1.7, one for 1.5 and one for Joomla 1.0. ConfigurationConfiguration of the module is done via Modules > Site Modules. Click on the Joomla Main Menu Images item, and you will see a screenshot similar to the one below. It is basically the same as the mainmenu module, with the Show Menu Icon choice selected by default. Example SetupConfiguration 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 (Modules > Site Modules > Joomla Main 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 Change Background On Mouse OverChanging 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.
li.item55:hover {
SupportPlease post to the forums of you need help in configuring the module. Do you like this module? - Buy me a beer (€3)If you liked this module, please consider buying me a beer Thanks goes to hiveminds for this hack.
|
it's a simple and functional way to "hide" the text of your menu voices...
thanks!!!
Do you think this could be used to create custom menu names. Instead of having boring h1 text, perhaps a unique jpg for each menu? thanks!
This is a brilliant module !
One idea for the next release: Could it have a different image for rollover ?
Keep up the brilliant work !
James
recien he podido bajar este modulo, ojala sea lo que estoy buscando, bye
I installed the module, but when I activate the module, doesn,t show the images, only the names of the menu itens.
Help Me Please.
Are you sure you activated the module and published it to the correct position? This is usually the most obvious solution to the problem.
how can I make it work with other menus?
thanks
It can work with any defined menu, not just with main menu.
This can probably be done by changing the main menu style.
Tried this module out, workes just fine in Firefox... but in IE it tries to get images even for the menuitems that doesn't have an image... tried too look at the code but looks like there is an "else" who's suppose to fix that... but it doesn't.
It looks like a nice module, but how can I show only the images without the text ??
At the moment I see both image ant text, and only the text is a link.....
can someone help me?
Also, can I make it work with Joomfish ??
Thanks :-)
Hi Sharemind, if you are getting image and text then you are defintely doing something wrong, because with this module it is NOT possible to display the text! The function of this module allows ONLY the image to be displayed. Make sure you have the correct module enabled and published, and replacing the original menu module.
having same problem as Sharemind.
I published everyhting correctly and unpublished the org Main menu, but nevertheless I 'm seeing text underneath the pictures.
I have the same problem also nothing happens when I click on the image.
Is there a howto ??
Well it works well on my installation, so you'll need to provide more details and a URL if you want me to try to help!
I do'nt see that screenshot.
I am using joomla 1.0.13
Contact us directly via the Contact Us link anton
hi,
can any one tell me how to make this menu horizontal.I mean i want to display it as horizontal.
open mod_mainmenuimages.php
search the css class mainlevel and replace it by mainlevelimages by exemple. save the modification.
what we done, we have changed the default css class for the module, we can now add the new css class in the css file of ur template and ajust width. in default css class, width is 100% thats why horizontal align go wrong
excuse me but im not american, excuse my wrong speakin
ben adams
Hi, is there a manual for how to customise the Joomla Main Menu Images Module? I have installed it, but I don't know how to let it work...Thank you!
It dosen't work in Joomla 1.5 i've got this:
the / on the end of the
I had problems with text showing and images not being hyperlinks. I fixed my problem by Setting the 'Show Title' option of the menu to false. I guess it did not initialize properly since this should not have anything to do with image functionality etc.
In joomla 1.5.3 I have this error:
Impossible to copy selected file * JInstaller::install:opt/lampp/htdocs/joomla/tmp/ install_483bc7c71f2c4/mod_j15mainmenuimages/tmpl/ index.html a opt/lampp/htdocs/joomla/modules/ mod_j15mainmenuimages/tmpl/index.html
I have set the legacy mode end changed the legacy.php file but I have the same error. Why? How can I do? Thanks
Try setting up the FTP layer, you don't the need Legacy mode on.
Same problem as Gluip above. Found that if this is the first menu on the page it works. As soon as you have another showuing befroe it, it fails. Nice try though
Am I able to show submenus? If so, where do I enable that? I have show submenus set to always. I'm trying to make flyout menus for the submenu. It's worked great for the main menu though! Thanks!
How do you define the Active and Hover state images?
It doesn't work with 1.0.15
I've the same problem like sharemind and Gluip. Nothing change, your menu is exactly the same as main menu with icons and text. Exerything was activacet corretly by me
If this problem can change, tell me, if we can use this module for two menus on one site.
Nice works with 1.0.13 and really simple to use it twice on one site
Only rename installation files and some names in this files and packes. Greate work!
I'm new to using this so please bare with me! I'm unsure of how to change the preset images to custom made images!
can someone PLEASE HELP!
I'd be greatly appreciated (:
To change the images to your own, you need to go to the menu which you are displaying, and change the relevant image for the menu item.
thank you very much for your help! I was able to fix that
HOWEVER...
the new images automatically place overlap eachother and I am wondering what code I need to change to alter the spacing!
actually i was able to find out that the browsers alter the spacing of the buttons for some reason. It seems to work best with IE 6 but does not show up well at all with IE 7. is there anyway to adjust the compatibility or fix this issue?
Extended Menu - ExMenu
nolinkspls://de.siteof.de/extended-menu.html
nolinkspls://extensions.joomla.org/component/ option,com_mtree/task,viewlink/link_id,163/ Itemid,35/
Anyone interested in a super-configurable Menu module... please consider using ExMenu ! O.K. it has many advanced parameters, but believe me: It is worth it. Playing with and testing is absolutely necessary. Not simple on first-sight. It also has an Image-only setting. BTW Joomla 1.0 and 1.5 native!
J!1.0 alternatives:
Simple Image Menu Module
nolinkspls://extensions.joomla.org/component/ option,com_mtree/task,viewlink/link_id,1303/ Itemid,35/
Thumbnails Menu
nolinkspls://extensions.joomla.org/component/ option,com_mtree/task,viewlink/link_id,1789/ Itemid,35/
MosCmenuTree
nolinkspls://extensions.joomla.org/component/ option,com_mtree/task,viewlink/link_id,942/ Itemid,35/
CU
i bought you a beer. have fun!
hope it inspire for more nice and simple features like this one.
I install this module in Joomla1.0, I activeted, and the only that I got is the text for the main menu !!!!
It's the first time I am using this module, can anybody help me please?
Anyway someone would do a tutorial? I cant get this thing to work for beans. I know its something simple that I'm missing, but not sure at all.
Same Problem as sharemind, dimitric, anton, antonvdh, Eric, Gluip, and eMCE.
Detailed discription:
My original menu name: LEFT-MENU2 (mod_mainmenu)
Assigned Menu Images to all the Menu Items in LEFT-MENU2.
Published your module (mod_mainmenuimages), assisned LEFT-MENU2 as the Menu Name.
Unpublished LEFT-MENU2 and also tried as published!
Problem:
The Menu Item Image and Text is displayed; the same as the joomla (mod_mainmenu). The image is not linkable, but the text is. Unless I dig into the mod_mainmenuimages.php to fix the problem or really to revamp your hack, your module is not working properly. Can you please fix the bug and provide a newer version.
Thanks
My clean install:
Joomla! 1.0.13 Stable [ Sunglow ]
DART, I figured a workaround!
For sharemind, dimitric, anton, antonvdh, Eric, Gluip, and eMCE.
Instead of reinventing the wheel, I figured this workaround because, I need to get this site up ASAP. So for the time being this fix will work temporarily until DART can fix the bug.
To get this to work do not install DART's module instead, rename it to mod_mainmenu.php and overwrite the existing joomla version in joomla install/modules/ directory.
Assign Menu Images to your existing Menu Items which need images.
Go to Modules>Site Modules>Select your Menu> And under Class suffix give it any name you want, (i.e. menu_image)
By giving it a class it won't conflict with your current css settings for your text version menu items, and you can give it more styling in your css.
Done! O yes make a back up copy of your joomla mod_mainmenu.php.
If anyone has any problems with this workaround let me know here, and I'll try to help.
Charles33
Charles and all,
a new version has been issued which solves the bug without any hacking if Joomla core files.
Is it possible to change the spacing between two elements (images) of the main menu image? How can i do that?
I tried to enlarge the images but it's a more dificult process (and takes more time).
Thanks in advance,
Nuno
This should be easily done using CSS. Try adding padding to the top and bottom of the li tag. If you have difficult post on the forums and I'll try to experiment and find a solution.
For adding mouseovers, replace line 289-293 in /modules/mod_j15mainmenuimages/helper.php with following,
if ($iParams->get('menu_image')&& $iParams->get('menu_image') != -1) {
// make mouseout and mouseover images by James
$hoverimage=preg_replace("/\.(png|jpg|gif|bmp)$/ ",'_hover\0',$iParams->get('menu_image'));
$mouseout="onmouseout=\"this.src='".JURI:: base(true)."/images/stories/".$iParams->get('menu_image')."';\"";
$mouseover="onmouseover=\"this.src='".JURI:: base(true)."/images/stories/".$hoverimage."';\"";
$image = '';
} else {
$image = null;
}
and upload hover images in /images/stories/ in following format,
image - home.gif
mouseover image - home_hover.gif
File extension can be png,gif,jpg,bmp however.
Note : Editor has messed up the code. Please format carefully.
Special thanks to jamesreed and Boonk for their valuable inputs.
Special thanks to jamesreed and Boonk for their valuable inputs
I'm having all kinds of issues with this menu module and sh404SEF. Has anyone been able to get it to work? My templates do not work properly and secondary menu items do not display.
Many compliment!!! Great Job raga!!
DA PAURAAAAAA!
from italyy ![]()
Can you tell me where the download link for J1.5 is please? All I can see is the link for J1.0.
Thanks
Joomla 1.5 download
nolinkspls://zzz.dart-creations.com/component/
option,com_docman/task,doc_download/
gid,8/Itemid,67/
Link you provided is not working.
Could you just put version for J1.5 in the download section? Like others mods are available.
Module is working great. However I don't see the option to display my menu as legacy-horizontal.
Would be great because I designed the website i'm working on with a horizontal main-menu.
Is there a way to do this?
I am having the same problem as NeveAddict (last comment) using Joomla v 1.5.4. I only have the List option available for the Menu Style.
My upload manager is not working , can you tell me where to put the files . And secondly how do i configure the module from joomla. (module manager)
I would like images and text in my menus, with the image and text aligned at the top (so I can have a 100x100 image, with a few lines of text to the right of the image). Can this feature be added?
If you want images and text, you don't need to use this mod, you can use the standard Joomla main menu.
Hello, how can i change menu style of the module? I have list style only.Can i add another style?
Thanks!
I have the same problem than petaka. I've tried to copy some menu styles of the XML archive of mainmenu but doesn't work... Some ideas?
Hi Petaka / Leon,
what kind of styles are you looking for? Please suggest and I will implement for your needs. Get in touch via Contact Us if necessary.
Hi Petaka / Leon,
what kind of styles are you looking for? Please suggest and I will implement for your needs. Get in touch via Contact Us if necessary.
i've made it with CSS using
.menu li{display:block;float:left}
Hi there
Really an excellent MOD. the only thing missing here, in my opinion, is a lack of tooltip. If you could integrate one would be perfect.
Good work though!
Urgent.I installed the module, it works but I noticed that I can only change the menu module MainMenu, you can change MainMenu addition to the rest of the voices of other forms? hello and thank you
I can also change the other modules so they are all equal?
I'm not sure I understand your problem but yes, you should be able to replace all menu modules with the main menu images module.
This question has been asked before. I really need to change the menu images (replace an image with another) on mouse over event! Any idea how it is done?
i get he same problème how to change the menu images on mouse over event!how how hoooooow, help me please
Basically, since the module use imgs not CSS to display the images, this is not strictly possible (at least with my knowledge of CSS which is limited). However, what I did manage to do is create a CSS style which changes the background of the image.
li.item55:hover {
img:url(/images/stories/otherbackground.jpg);
}
Where item55 is the style of the menu item class (i.e. you'd need to change this accordingly).
Hope this helps.
In fact, the proposed roll-over workaround won't work for IE and FF. Let me thank you for your efforts, Dart. But I'd like to ask you this:
while redefining standard output for a menu (in a helper.php, I assume), one of the variables reconstructs, sends to buffer and subsequently transforms it to output the "image" object. Why would you do that? For the sake of simplicity, why instead of ul > li > a > img construction not make in just ul > li > a?
That would make CSS roll-overs as simple as it could be.
Could you please change *.php - code accordingly?
Thank you,
Nook.
Nook, it would be great if you could get in touch via the Contact Us page, so we can discuss this in further detail. We'd love to get a solution for this!
I only have menu style "List"
Can we have the other styles, like "legacy-horizontal" or "legacy-vertical" or "legacy-flat list"
I've been wanting to convert a website over to joomla for at least a year but the client at zzz.fosterdairy.com wants to keep their rollover images. If I could have a way to use this module and add another image for a rollover - then it would be awesome. please contact anyone at site if that is available already or if there is something else that would allow me to do that.
You can use something such as the hover as suggested in the article above.
Hi
This works great, but I need to have a different image for the menu item that is selected (actually clicked on, not just a hover roll-over). Is this possible with this module?
Thanks!
It is possible to do this with CSS, however its not very straight forward, and probably its better to look at another module / component to help you out ...
I have more languages on my website. Your modul works fine, but when i change language the image menu still the same.I need change images with language. I use joomfish modul. Is it possible to works with joomfish ? Thanx
its me again. I reply myself. Its great i found it. Your module works with joomfish . UNBELIVEABLE. Thanx guys
i have an error when i tried to use the module..please help...tia
here's the error:
Fatal error: Cannot redeclare mosgetmenulink() (previously declared in /home/olympich/public_html/modules/ mod_j15mainmenuimages/legacy.php:20) in /home/olympich/public_html/modules/mod_mainmenu/ legacy.php on line 162
same error for me - module only working with list option. As soon as you select any other option you get this error:
Fatal error: Cannot redeclare mosgetmenulink() (previously declared in /***/modules/mod_mainmenu/legacy.php:20) in /***/modules/mod_j15mainmenuimages/legacy.php on line 162
I believe this happens because you are using both our menu and the default joomla menu, and this might be causing this conflict when legacy mode is enabled.
Hi! the fatal error occurred every time any legacy menu style was selected - regardless of menu, module position or template. HOWEVER it works when legacy mode is enabled??
Well this functionality is by design. Some of the styles only work in Legacy mode.
Sorry - incorrect info on previous post. 'Dart' your theory was correct - fatal error caused by both menus - the Image Menu and the default joomla menu. Is there any workaround for this as I have default menus throughout the site and only one (critical) application of the Image Menu?
Hi - sorry to be a pain - i can't use both menus together even with legacy enabled. It works in "list mode" but i need it in horizontal. every time i enable the picture menu and the standard joomla menu the error is generated.
Hmmm ... I did replicate the error, and uploaded a new version. Please download and test ![]()
i dont see hover effect, i'm using in template.css:
li.item55:hover {
img:url(/images/stories/hoverimage.jpg);
}
please help me
Hola
I would like to show two menus with images in a web. How can i dow that? that is i would have a top menu and a main menu? i try to change the name of the module to top and tto hae two module but didn´t work properly.
Hi DART, to get mouseover hover images working, just add these lines. Then just add an image to images/stories called _hover.jpg and my code will swap between them.
eg. if your menu image is called 'menu1.jpg' add another image called 'menu1_hover.jpg'.
Edit helper.php
Line 295
if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
// make mouseout and mouseover images by James
$hoverimage=preg_replace("/\.(png|jpg|gif|bmp)$/ ",'_hover\0',$iParams->get('menu_image'));
$mouseout="onmouseout=\"this.src='/images/stories/ ".$iParams->get('menu_image')."';\"";
$mouseover="onmouseover=\"this.src='/images/ stories/".$hoverimage."';\"";
$image = 'get('menu_image').'" alt="" />';
Sorry for formatting
just copy/paste it.
thanks,
James
sry for my bad english
I need you help, I can get it to work
That is my
helper.php (line 288-299)
$iParams = new JParameter($tmp->params);
if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
// make mouseout and mouseover images by
James
$hoverimage=preg_replace("/\.(png|jp
g|gif|bmp)$/",'_hover\0',$iParams->get('me
nu_image'));
$mouseout="onmouseout=\"t
his.src='/images/stories/".$iParams->get('menu
_image')."';\"";
$mouseover="o
nmouseover=\"this.src='/images/stories/
4;.$hoverimage."';\"";
//$image = get('menu_image').'"
alt="" />';
$image = 'get('menu_image').'"
alt="" />';
} else {
$image = null;
}
can
u see what is wrong ? or can u mail me your helper.php ?
Thanks,
Daniel
ok its work now! ![]()
James Code
is probably incomplete ..
the correct code is
(fuck editor^^, u must add a "less-than sign" bevor img and write iParams together ... thats maybe why James Code is incomplete xD)
Thanx, Daniel
if sb need the working helper.php with mouseover feel free to send me a mail ![]()
hey boonk i send you a lots of email but no have response, can you please upload the helper.php file on rapidshare, megaupload, etc... o you cand send me the file by email?
Thanks!
Sorry, seems the formatting on this editor messed up my code:
I've put my working helper.php file here:
[url]nolinkspls://zzz.startnet.co.uk/downloads/ mod_j15mainmenuimages/helper.php[/url]
Right-click Save-As to download it.
Get error (404) coding when I right click & save as. Did it go away?
Also,
anyone get dropdown or sliding menus to work with this module?
I can´t make it work on 1.5.14, can some one help me with some pics?? 'cause the ones showed here are for joomla 1.0 right?.I really need this can you help me?
Yes the pictures are for Joomla 1.0, but there is a version, and it works fine with Joomla 1.5, the steps are pretty much the same.
View updated instructions here:
nolinkspls://zzz.dart-creations.com/joomla/joomla- modules/joomla-1.5-main-menu-images-module.html
Hi!
Thanks for nice module. It lacks the ability to have different images for Active menuitem and Rollover as well. I made a simple mootools -based hack which fixed it. It's quite simple. Create a .js file containing the following lines
where "-active" would be suffix for your active state image. You must place both your normal and active image to same folder.
You can add hover image with the same way (here is a tutorial / code snippet: nolinkspls://davidwalsh.name/mootools-image- mouseovers)
Ah. And of course you must include the .js file in your joomla template with:
Can you get in touch with me via the Contact Us page, I'd be glad to put the code in the module to enable all to use it!
for some reason when the code is applied to my menu, it loses the closing tags surrounding each item. any ideas on how to fix this?
Hello Boonk,
i have followed your modified code, but didn't work. images are coming but i didn't get the hover effect. here is my helper.php code
$iParams = new JParameter($tmp->params);
if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
$hoverimage=preg_replace("/\.(png|jpg|gif|bmp)$/ ",'_hover\0',$iParams->get('menu_image'));
$mouseout="onmouseout=\"this.src='/images/stories/ ".$iParams->get('menu_image')."';\"";
$mouseover="onmouseover=\"this.src='/images/ stories/".$hoverimage."';\"";
$image = 'get('menu_image').'" '.$mouseover.' '.$mouseout.'/>';
//$image = 'get('menu_image').'" alt="" />';
} else {
$image = null;
}
Aloha,
Great job Dart!
Are you considering allowing this module to work with suckerfish sub menus? What I am looking for is to have text submenus drop down when hovering over the main menu image. If I install Superfish, it shoves the images off to the side and only uses text. If you could allow submenus then I would not need superfish.
Mahalo,
Don
hi... this is a great module... but still, im stuck at how to make the image menu to hover. Where do i must put the code :
li.item55:hover {
img:url(/images/stories/otherbackground.jpg);
}
help me please, still confuse how to make it hover...
Leoxy, have a look at the updated instructions here:
nolinkspls://zzz.dart-creations.com/joomla/joomla- modules/joomla-1.5-main-menu-images-module.html
I'm using this on a new menu I created and works perfect! Easy set up. Now I'd like to also use images on other site menus, ie the main menu. Is this possible?
From what I see, the module can only be used on one menu at a time.
I'd link to be able to use image links on more than one site menu at the same time.
Don
I cant get passed clicking the menu i want to replace with images....HELP!!! I have in the menu an article called "test" in it and thats all. I cant find where I am suppose to upload the images to! Im using a regular menu, i dont know wht is a site menu...help plz!
How to change spacing between images??
I have read many posts above and see that have to change it in css but actually i'm a very newbie to this. Can anyone please tell me in details how to change spacing between images in css file?
Thanks so much for helping me!
So very easy to use. The hover menu setup is so easy as to be almost insulting.
Hi Silentium,
Since it is so easy for you, could you please tell me what I need to change in order to create a hover menu and an active state? I also want to swap my buttons for slightly different ones but I cannot figure out how to do that. Do I have to change the style sheet, or the index.php? Or is it javascript?
Thank you for considering.


How simple and useful!!
Thx guys!
P.S. I will try to remember to donate when got ccard