transparent image workaround

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:44

transparent image workaround

Poster: chrisinoz
Dated: Sunday May 15 2005 - 10:12:33 BST

Hi

Latest version

Have had trouble showing a transparent image.

I ended up uaing a separator image to do it.

Is that the best solution?

Thanks for your comments.

see

http://www.esimplified.net/flash/

Here is my main menu for the front page

Code:

<script>with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=250;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";
                  
aI ("separatorimage=images/menu_left.gif;separatorwidth=23;separatorheight=23;");   
aI("showmenu=Partners;text=Tenant Tools&nbsp;&nbsp;;separatorcolor=ffffff;separatorsize=1");
aI("showmenu=Links;text=&nbsp;&nbsp;Landlord Centre&nbsp;&nbsp;;separatorcolor=ffffff;separatorsize=1");
aI("showmenu=Anti Spam;text=&nbsp;&nbsp;Vacant Properties&nbsp;&nbsp;;separatorcolor=ffffff;separatorsize=1");
aI("showmenu=Anti Spam;text=&nbsp;&nbsp;Contact Us&nbsp;&nbsp;;separatorcolor=ffffff;separatorsize=1");
aI("status=Back To Home Page;text=&nbsp;&nbsp;Home&nbsp;&nbsp;;url=index.php");
aI("separatorimage=images/menu_right.gif;separatorwidth=43;separatorheight=23;");   
aI("text=;");
}
drawMenus();                  </script>

AND

Code:

with(menuStyle=new mm_style()){
//bordercolor="";
//borderstyle="solid";
//borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="10pt";
fontstyle="normal";
fontweight="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
//imagepadding=6;
offbgcolor="";
offcolor="#FFFFFF";
onbgcolor="";
bgimage='images/menubg.gif';
overbgimage='images/menuoverbg.gif';
oncolor="#FFFFFF";
outfilter="Fade(Overlap=1.00)";
//separatorcolor="#ffffff";
//separatorsize=1;
padding=1;

}

Cheers

Chris

Poster: Ruth
Dated: Sunday May 15 2005 - 18:04:58 BST

The problem is you have a bgimage call in the global style so that calls it for each item, including the items with the transparent part. But, that bgimage is showing the color in the transparent part. So, code the menu in the table as follows:

Code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";                  
aI("image=menu_left.gif;itemwidth=23;itemheight=23;bgimage=none;separatorsize=0;");   
aI("showmenu=Tenants;text=&nbsp;&nbsp;Tenant Tools&nbsp;&nbsp;;");
aI("showmenu=Landlord;text=&nbsp;&nbsp;Landlord Centre&nbsp;&nbsp;;");
aI("showmenu=Anti Spam;text=&nbsp;&nbsp;Vacant Properties&nbsp;&nbsp;;");
aI("showmenu=Anti Spam;text=&nbsp;&nbsp;Contact Us&nbsp;&nbsp;;");
aI("status=Back To Home Page;text=&nbsp;&nbsp;Home&nbsp;&nbsp;;url=index.php;separatorsize=0;");
aI("image=menu_right.gif;itemwidth=43;itemheight=23;bgimage=none;");   
aI("text=;");
}
drawMenus();

and in your menuStyle put back the

Code:

separatorcolor="#ffffff";
separatorsize=1;

That works in Netscape, Firefox, Opera and IE

Edit: if there are problems in other browsers, then remove the bgimage= from the global style and just put it in each item you want to have a bgimage, i.e. all items but the two end ones. Not sure why you have that bottom empty aI string.

Ruth

Poster: chrisinoz
Dated: Sunday May 15 2005 - 23:45:09 BST

Hi Rith

That was most helpful. Thank You.

Reason for End empty A1 string.

Because I was using a separator image at the RHS end it needed another item to follow it otherwise the separator simply would not show.

Cheers

Chris

Industrial Strength JavaScript and DHTML Menus

transparent image workaround