Board Logo

images as button's background
mafran - 10/13/2003 at 06:24 PM

Dear all,
I have used the Tigra menu with a lot of satisfaction, and now I'd like to personalize it.
I need to put an image as background of the buttons with the link text over it.
I think I should use the inner html feature but I don't know how to use it.
I've tryed copying this line ['<img src="icon.gif">&nbsp;SoftComplex', ''], found in the documentation in the file menu_item.js and I put an image called icon.gif in the same path of the .js files but it does not work, it just create a new menu item displaying this text '<img src="icon.gif">&nbsp;SoftComplex', and no image!
Please help me with some tips ( where I have to copy that line to make it function?)
Thank you very much for your support.


P.s.:sorry for my terrible english!!!

turcanu - 1/27/2004 at 09:20 AM

any advices on background image here?

tigra - 1/27/2004 at 06:15 PM

Images can be inserted into menu items by using either CSS settings or inner HTML.

CSS: specify background-image property for outer tag of the item.

Inner HTML: insert HTML for table into item's text. Assign background image to the table and put item's text inside some cell. If you receive javascript errors then check for correct quotation.

Troop476 - 9/29/2004 at 06:53 PM

What is the correct syntax:

is it:

background-image: 'imagename.jpg'

I tried putting this in the menu.css file under the


section but it did not work.

I also noticed that if I changed the Color property it did not work, only when I changed it in the menu_tpl.js file and not the menu.css file.

tigra - 9/30/2004 at 05:21 AM

With CSS: apply the styles to outer tag if you want to change the item's box properties (such as background, borders, background image etc). inner tag is for font settings (font face, text decoration, fornt weight etc).

Some aspects of menu configuration via CSS may differ along menu versions.

computertech - 4/15/2006 at 01:23 AM

I'm using the free version of Tigra and would like to add background images to each level of the menu, and have the image change in the hover, on, out, and active states. I'm not very good at css however. What code would I use? I think I've identified the 4 areas of the tpl.js file, and I sort of see where this might go in the css file. Basically I need to know what code to use and where to put it.

DMHDMH - 1/10/2008 at 09:03 PM

Add this in the menu.css doc in the appropriate css item and remove the background color.

background: url("");

Back to forum: