Main Menu Image Links

Krycek · **Posted:** Wed Aug 19, 2009 1:58 pm

Hi Olaf,

Well I'm talking about basic J! 1.5.14 main menu, w/o any hack in. Selecting an image for the menu item deactivate the texte and only shows the image which is fine. However, the "title=" tooltip would be helpful.

If this doesn't answer your question, it is probably because I misunderstood it.

Don't hesitate to let me know that I'm wrong !

ooffick · **Posted:** Wed Aug 19, 2009 2:22 pm

If you open the module for that main menu, you will find a select box called Menu Style in the Parameters of that module?

Depending on which one you selected the file you will have to change is different.

Olaf

Krycek · **Posted:** Wed Aug 19, 2009 4:44 pm

Got it ! It is currently styled as list.
Thanks for your patience !

What would then be the next step ?

ooffick · **Posted:** Thu Aug 20, 2009 8:34 am

Copy the following file
/modules/mod_mainmenu/tmpl/default.php

to the following location:
/templates/[your template]/html/mod_mainmenu/default.php

and add the following code:

Code:

   if (($node->name() == 'a')) {
   $img = $node->children();
   $node->addAttribute('title',$img[0]->attributes('alt'));
   }

This would add the title attribute to the a tag.

Olaf

Krycek · **Posted:** Thu Aug 20, 2009 8:53 am

Thanks Olaf.

But if I'm not mistaking it will copy the alt attribute from the picture to the link... I will thus remain with J! Alias (lowcase string w/o space & accents) and thus be difficult to understand. My point would be to get J! link name.

If I don't specify a picture, I'll get link name, right ? For instance : [link]Join the forum[/link].
My point would be to have both : the picture and in its title attribute (or the link, doesn't matter) fullfilled "Join the forum" and not "join_forum" as balloon tip.

ooffick · **Posted:** Thu Aug 20, 2009 9:38 am

As far as I know, you would need to change this file to use the label name instead of the alias: /modules/mod_mainmenu/helper.php

Olaf

Krycek · **Posted:** Thu Aug 20, 2009 9:57 am

Ok.

Removing alt is useless, replacing both title and alt with label name is not W3C compliant (alt attribute should'nt get accents for instance)...

Then I should maybe check deeper, study how the default.php works, where it does call for Alias to fulfill alt attribute. Then check in helper.php how to call the label name and duplicate previous method to add title attribute.

I'll have a look at it and feedback here once solution's found.

Thanks again for your help Olaf !

Edit :
I've found in helper.php this :

Code:

switch ($tmp->browserNav)
         {
            default:
            case 0:
               // _top
               $data = '<a href="'.$tmp->url.'">'.$image.$tmp->name.'</a>';
               break;
            case 1:
               // _blank
               $data = '<a href="'.$tmp->url.'" target="_blank">'.$image.$tmp->name.'</a>';
               break;
            case 2:
               // window.open
               $attribs = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$this->_params->get('window_open');

               // hrm...this is a bit dickey
               $link = str_replace('index.php', 'index2.php', $tmp->url);
               $data = '<a href="'.$link.'" onclick="window.open(this.href,\'targetWindow\',\''.$attribs.'\');return false;">'.$image.$tmp->name.'</a>';
               break;
         }
      } else {
         $data = '<a>'.$image.$tmp->name.'</a>';
      }

Here the link itself is created. I should then replace each "<a" string by :

Code:

<a title="'.$item->alias.'"

... remains to know how to call the menu label. Would that be : $item->label

ooffick · **Posted:** Thu Aug 20, 2009 10:09 am

What do you mean? I never suggested you replace the alt attribute of the image with the label name. you could e.g. add the title attribute to the image tag or the a tag in the helper.php file.

Olaf

ooffick · **Posted:** Thu Aug 20, 2009 10:14 am

Krycek wrote:

... remains to know how to call the menu label. Would that be : $item->label

Did you try $item->name

Olaf

Krycek · **Posted:** Thu Aug 20, 2009 11:43 am

Well I didn't try anything yet, but I'll give it a shot.

Krycek · **Posted:** Thu Aug 20, 2009 1:13 pm

Ok, it does work

, and here goes the solution :

Aim: Add link name into link title="" attribute to get the tooltip effect with the Main Menu Image styled.

Platform: J! 1.5.14 (though it should work down to J! 1.5.9)

Solution:
Template override
Copy the following file:
/modules/mod_mainmenu/tmpl/default.php
to the following location:
/templates/[your template]/html/mod_mainmenu/default.php

Little hack
With a text editor, replace all occurences of:

Code:

<a href=

by:

Code:

<a title="'.$item->name.'" href=

There should be 4 occurences, no more.

Save, upload, clean up cache, refresh page... here you go !

Many thanks to Olaf !!!

choasetac · **Joined:** Thu Aug 27, 2009 9:18 am **Posts:** 3

hy everybody...

I have Jomla 1.5.12 version and This template

I would like to make Acctive menu items different color then others... so if I am looking FAQ I want it to stay in greenish - blueish color like hover efect...

can somebody help me, pls

ooffick · **Posted:** Thu Aug 27, 2009 9:43 am

hi,

you can use the following code to set this for the FAQ Menu Item:

Code:

ul.menu li#current.item41 a{
background-image:url(../images/link-over.gif);
}

Olaf

choasetac · **Joined:** Thu Aug 27, 2009 9:18 am **Posts:** 3

ooffick wrote:

hi,

you can use the following code to set this for the FAQ Menu Item:

Code:

ul.menu li#current.item41 a{
background-image:url(../images/link-over.gif);
}

Olaf

thanks man..
that was quick and correct... (alhought I doubt in that code-lines..)
thanks a lot

kosson · **Posted:** Sat Oct 31, 2009 6:56 pm

I have the same issue hare and sorry but /modules/mod_mainmenu/tmpl/default.php does not contain any

Code:

<a href=

so I would be able to apply Krycek. I burned almost 8 hours with the issue.

I will attach my own default.php

Please advise!

P.S. Is there any way to put tooltips to menu images? Maybe using mootools or something else?
I really need this as I develop a site having only images for the menu and I have to put tooltips to designate what is what.

HELP!

ooffick · **Posted:** Sat Oct 31, 2009 8:02 pm

You could try to edit the helper.php file.
And yes, you can add tooltips as well. Have a look at the mootools manual.

Olaf

kosson · **Posted:** Sat Oct 31, 2009 10:21 pm

Thank you ooffick!

My limited knowledge of Joomla! API doesn't allow me to understand how <a> gets formed and where in the file I should add code. So beats me for now. I would love to have a solution but it seems it eludes me for the moment concerning where and how <a title="'.$item->name.'" should be inserted. It is rather complex code and I'm not that very well equipped to understand it fully...

Some piece of advice?

Is there anyone out there who has succeeded adding tooltips (maybe elegant ones via mootools) to a main menu made out of images?

ooffick · **Posted:** Sun Nov 01, 2009 7:56 pm

So did you check modules/mod_mainmenu/helper.php and did you try to search for

Code:

<a href=

Olaf

kosson · **Posted:** Sun Nov 01, 2009 8:26 pm

Yes, good point here... hmmm, I've fixed the code from helper like this

Code:

   switch ($tmp->browserNav)
         {
            default:
            case 0:
               // _top
               $data = '<a title="'.$item->name.'" href="'.$tmp->url.'">'.$image.$tmp->name.'</a>';
               break;
            case 1:
               // _blank
               $data = '<a title="'.$item->name.'" href="'.$tmp->url.'" target="_blank">'.$image.$tmp->name.'</a>';
               break;
            case 2:
               // window.open
               $attribs = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$this->_params->get('window_open');

               // hrm...this is a bit dickey
               $link = str_replace('index.php', 'index2.php', $tmp->url);
               $data = '<a title="'.$item->name.'" href="'.$link.'" onclick="window.open(this.href,\'targetWindow\',\''.$attribs.'\');return false;">'.$image.$tmp->name.'</a>';
               break;
         }

This does the trick but breaks the menu images alignment as they go one under another under first.
It is a step further and I thank you. I should make more time in delving this issue... hmmm tricky paths of Joomla! they are! or just me not so good apprentice.

Ooffick thanks for your time and advice. Any other thoughts on the matter?!

ooffick · **Posted:** Sun Nov 01, 2009 8:52 pm

You probably will need to use some lines in the CSS file? Do you have a URL, so I can have a look at it?

Olaf

ooffick · **Posted:** Mon Nov 02, 2009 9:51 am

Regarding the mootools tooltip, try to add this javascript to a module or to your template:

Code:

<script>
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item1'), { maxTitleChars: 50, fixed: false}); });
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item5'), { maxTitleChars: 50, fixed: false}); });
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item6'), { maxTitleChars: 50, fixed: false}); });
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item7'), { maxTitleChars: 50, fixed: false}); });
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item8'), { maxTitleChars: 50, fixed: false}); });
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item9'), { maxTitleChars: 50, fixed: false}); });
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('li.item10'), { maxTitleChars: 50, fixed: false}); });
</script>

Olaf

kosson · **Posted:** Mon Nov 02, 2009 10:05 am

Fab! I have already have the container appearing.

ooffick you are the savior!

itxtechno · **Joined:** Wed May 20, 2009 8:54 pm **Posts:** 4

ooffick wrote:

Krycek wrote:

... remains to know how to call the menu label. Would that be : $item->label

Did you try $item->name

Olaf

Hi Olaf,

I did change all the <a to <a title="'.$item->name.'" in helper.php, but somehow half of my menu items disappeared.

The menu items that still show up do have the hyperlink title right though. Would you have a clue as to why this is happening ?

Thanks,

Alex

ooffick · **Posted:** Tue Nov 03, 2009 7:23 pm

itxtechno wrote:

I did change all the <a to <a title="'.$item->name.'" in helper.php, but somehow half of my menu items disappeared.

I assume that your menu item title includes some characters which are non ASCII.
You could try to use $item->label instead of $item->name

Olaf

ooffick · **Posted:** Tue Nov 03, 2009 7:42 pm

or try to replace it with this

Code:

htmlspecialchars($item->name)

Olaf

itxtechno · **Joined:** Wed May 20, 2009 8:54 pm **Posts:** 4

ooffick wrote:

or try to replace it with this

Code:

htmlspecialchars($item->name)

Olaf

You're absolutely right. And quick !

stormit · **Joined:** Wed Aug 01, 2007 12:08 am **Posts:** 52

mSalcher Brilliant! Thank you very much!!

Any hints on getting rollover's to work on the menu iamges now?!

ooffick · **Posted:** Wed Nov 04, 2009 1:32 pm

stormit wrote:

mSalcher Brilliant! Thank you very much!!

Any hints on getting rollover's to work on the menu iamges now?!

Which rollover are you talking about? Do you mean the tooltips?

Or do you want to exchange the images when the mouse is over the image:

Code:

.item12 a:hover img {
display: none;
}
.item12 a:hover {
width: 150px;
height: 150px;
background-image: url(your-rollover-image.png);
}

(you would need to change the item12 to your itemid number)

Olaf

stormit · **Joined:** Wed Aug 01, 2007 12:08 am **Posts:** 52

Yes rollover on images, but where does that code need to go?

ooffick · **Posted:** Wed Nov 04, 2009 3:01 pm

You could e.g add it to the end of your css file.

Olaf

Joomla! Discussion Forums

Main Menu Image Links

Quick reply

Who is online