Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:33

position graphic after menu text


Poster: Derek Fielding
Dated: Monday April 12 2004 - 10:26:52 BST

I want to put a small grahic AFTER my menu text.
Using the following I can position the image before the text
aI("text= menu text here;image=gif/info.gif;url=http://www.my_link.com;;separatorsize=0")

How do I position the graphic AFTER the munu text?

I seem to remember that this was possible on Ver 3

Derek Fielding


Poster: John
Dated: Monday April 12 2004 - 14:49:01 BST

Try this...
Code:
aI("text=menu text here;image=gif/info.gif;url=http://www.my_link.com/;separatorsize=0;imagealign=right;");

Notice I removed an extra ; (you had ;;), and added 2 towards the end of the aI for proper syntax.


Poster: Derek Fielding
Dated: Monday April 12 2004 - 18:05:08 BST

Hi John,

Thanks for your reply. I pasted your code
aI("text=menu text here;image=gif/info.gif;url=http://www.my_link.com/;separatorsize=0;imagealign=right;");
into my menu but the image still appears before the text !!

Derek Fielding


Poster: Ruth
Dated: Monday April 12 2004 - 21:05:53 BST

To get an image after the text you have to put in the image html tag, ie.
"text=whatever<img src=http://whateverpath/whatever image and so on.

Ruth


Poster: Derek Fielding
Dated: Tuesday April 13 2004 - 4:49:54 BST

Hi Ruth

I am an absolute novice with javascript code. I cannot work out how to apply your solution. The code
aI("text=menu text here;image=gif/info.gif;url=http://www.my_link.com/;separatorsize=0") work fine but puts the image to the left of the script"Menu text here"
Can you give me the detailed code to convert the line so that the image appears after the text.

Derek Fielding


Poster: Ruth
Dated: Tuesday April 13 2004 - 13:14:29 BST

This just uses a regular html img tag like you do on pages. Leave out the image= part. Immediately after the text and before the semi-colon that closes it put in the html image tag, then the semi-colon, then url and the rest of what you have in your aI.
Code:
aI("text=menu text here<img src=http://www.whatever.com/usairgrd.gif border=0>;url=and so on to the end of that aI like you have it.


Poster: John
Dated: Tuesday April 13 2004 - 14:52:27 BST

Derek, don't forget proper syntax at the end of your statement...
Code:
aI("text=menu text here<img src=http://www.whatever.com/usairgrd.gif;url=http://www.my_link.com/;border=0;separatorsize=0;");


Sorry 'bout my wrong answer. It was my turn... :?


Poster: Derek Fielding
Dated: Tuesday April 13 2004 - 15:03:41 BST

Hi Ruth,
Thanks very much for the code. (now I realize that white spaces can disable a line of code I might get somewhere !!)
I have combined the code with a Milonic tooltip and everything works OK and the graphic appears after the text as I wanted. However I need to put some spaces after the text to space off the graphic. I have tried &nbsp; but that breaks the code. I could mod the graphic so that it will have a space at its left but I would rather do it with code. How can I produce a space of about 5 characters ? The full code I am using is shown below and I have indicated where I need the space. The url where this is being used is
http://www.get-the-message.org.uk
and the item (Guest Book) is in the main menu.

aI("text=Guest Book space here please<img src=gif/info.gif border=0> ;url=http://www.efreeguestbooks.com/mg/multi.pl?26326:14:0;target=_blank;onfunction=showtip('<table width=300><tr><td><font face=arial size=2><b>Due to a misunderstanding our guest book had been limited to 10 entries.<br><br>We now know, as at April 2004, there have been over 540 unseen entries.<br><br>We apologise to anyone who has made an entry in our guest book which warranted a reply.<br><br>Our new guestbook opens in a new window - please close the new window when you wish to return to this site.<br><br><font color=red>Please sign our guestbook before you leave<br>Click now</font></b></td></tr></table>');separatorsize=0")

Thanks again - Derek


Poster: John
Dated: Tuesday April 13 2004 - 15:37:20 BST

Derek, you are at more than 15 versions down-level. You're running 5.0RC45, and current is 5.12 release. Much has been improved/fixed in that span. "Technically", the version you are running is no longer supported, so I would suggest you move on up. :)

Also, I notice you're calling part of the menu code from a different domain than the page is located on. A Milonic license typically covers one domain only.

Looking at your code I do not see the mentioned &nbsp; after 'Guest Book'.

You can remove the double ;; items in your aI statements.

Close your aI statements like this example...
Code:
...final statement;");

Note the ;"); at the end of the line.

Keep extra spaces out of the aI lines...
Code:
aI("text=Home Page;url=index.html;onfunction=showtip('Our Home Page'); ;separatorsize=0")

and...
Code:
aI ("text=

Note the ; ;separatorsize and aI (...

Your effect statement will not work as is. If you don't need it, just take it out. If you do, use overfilter and outfilter, as...
Code:
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";

These would go in menu styles.

The above is not meant as a 'pick on Derek', but only to clean up some syntax problems.


Poster: Ruth
Dated: Tuesday April 13 2004 - 22:40:27 BST

I have been unable to get the image to position with spaces between it and the text, so unless someone else knows how to do it, you will need to make the image with the extra needed space on it.

Ruth


Poster: Derek Fielding
Dated: Wednesday April 14 2004 - 2:26:34 BST

Ok Ruth, I have done as you sugest and put the space in the graphic.

Thanks to all who contributed to the solution of this problem


Poster: kevin3442
Dated: Wednesday April 14 2004 - 18:45:04 BST

Seems I'm getting in here late, but...

John wrote:
Sorry 'bout my wrong answer. It was my turn...

I don't think it was your turn yet, John. My first thought was to try imagealign also. In fact I did try it, and it doesn't work. I think imagealign just doesn't work yet (?).

So... using an <img> tag in the text property is, as Ruth suggested, a good alternative. I'll just add that you can also set the align attribute in the <img> tag, to adjust the alignment of the image within the menu item. Like so:
Code:
aI("text=<img src=imageName.gif border=0 align=right>Item Text;url=whatever.htm;itemwidth=150;");

Keep in mind that, when right aligning an image, it's best to place the <img> tag before the text; that way, the vertical alignment will match the text. Now, no matter how wide you make the menu item, the image should always align to at the right side of the menu item.

Hope that helps,

Kevin


Poster: Derek Fielding
Dated: Wednesday April 14 2004 - 23:21:34 BST

Thanks Kevin,

Your code worked perfectly. I have used it on 2 items of my main menu The right alignment also tidies up the menu text.

Thanks very much :)

Derek