position graphic after menu text

Derek Fielding · Post by **Derek Fielding** » Mon Apr 12, 2004 10:26 am

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

Post by **John** » Mon Apr 12, 2004 2:49 pm

Try this...

Code: Select all

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.

Derek Fielding · Post by **Derek Fielding** » Mon Apr 12, 2004 6:05 pm

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

Post by **Ruth** » Mon Apr 12, 2004 9:05 pm

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

Derek Fielding · Post by **Derek Fielding** » Tue Apr 13, 2004 4:49 am

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

Post by **Ruth** » Tue Apr 13, 2004 1:14 pm

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: Select all

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.

Post by **John** » Tue Apr 13, 2004 2:52 pm

Derek, don't forget proper syntax at the end of your statement...

Code: Select all

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...

Derek Fielding · Post by **Derek Fielding** » Tue Apr 13, 2004 3:03 pm

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   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 ... on=showtip('<table width=300><tr><td>Due to a misunderstanding our guest book had been limited to 10 entries. We now know, as at April 2004, there have been over 540 unseen entries. We apologise to anyone who has made an entry in our guest book which warranted a reply. Our new guestbook opens in a new window - please close the new window when you wish to return to this site. Please sign our guestbook before you leave Click now</td></tr></table>');separatorsize=0")

Thanks again - Derek

Post by **John** » Tue Apr 13, 2004 3:37 pm

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   after 'Guest Book'.

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

Close your aI statements like this example...

Code: Select all

...final statement;");

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

Keep extra spaces out of the aI lines...

Code: Select all

aI("text=Home Page;url=index.html;onfunction=showtip('Our Home Page'); ;separatorsize=0")

and...

Code: Select all

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: Select all

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.

Post by **Ruth** » Tue Apr 13, 2004 10:40 pm

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

Derek Fielding · Post by **Derek Fielding** » Wed Apr 14, 2004 2:26 am

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

kevin3442 · Post by **kevin3442** » Wed Apr 14, 2004 6:45 pm

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: Select all

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

Derek Fielding · Post by **Derek Fielding** » Wed Apr 14, 2004 11:21 pm

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