Copyright © 2000-2009 MultiMedia Soft 
Return to index  
 
How to render 3D buttons over a background image 
Many web sites make use of background pictures instead of using a solid background color for their HTML pages; this can be an issue if you want to add our 3D buttons because, in order to have an optimal rendering, 3d buttons need to anti-alias the color of their borders with the color of the background they will be placed in. As you may know, HTML elements exact positioning is sometime completely out of your control and can change depending upon the browser you are using so, knowing exactly which part of the background picture they will be placed on, could be for various reasons an impossible task. 
Below you will find two ways to enable the use of 3D buttons over a background image. 
1.   Don't use Anti-aliasing 
The simplest method to place one of our 3D buttons over a background picture is the following: 
  • Select the Others Tab 
  • Uncheck the "Use Antialiasing" option as shown below; this will force the button to avoid anti-aliasing its border's color with the container background color (note that the internal parts of the button will be in any case anti-aliased). 
  •  
  • Export the button using one between Transparent GIF and Transparent PNG formats: these formats will render as transparent the corners of the final 3D button picture 
  •  
    Note that this method will usually work also if you have a scrollable web page over a non scrollable background picture. Using transparent formats like GIF and PNG has drawbacks: 
  • GIF format allows the use of 256 colors maximum: this means that 3D buttons, with many colors inside, could not be able to render their surface with the same smooth gradients seen on the Button preview pane
  • PNG format transparency is not directly available on certain browser like Internet Explorer: for enabling PNG transparency inside Internet Explorer you must include the picture inside a DIV like this: 
  • <DIV ID="oDiv" STYLE="position:absolute; left:60px; height:60; width:60; 
       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( 
       src='your3dbutton.png', sizingMethod='image');" > 
    </DIV> 
    Obviously the code above won't work inside browser like Netscape or Firefox (that already support Transparent PNG). Further information about PNG transparency support can be found on the Microsoft web site
    A good solution for creating portable web pages, containing transparent PNG images, is to adopt a technique, based upon a small JavaScript code, invented by Bob Osola: details about this technique can be found on his web site. For compatibility with Internet Explorer, this code requires to have Internet Explorer version 5.5 or higher. 
     
    2.   Try to load a background picture inside 3D Button Visual Editor 
    Starting from version 4, 3D Button Visual Editor gives the possibility to load a background image that can be used as a background for the 3D button under editing on the Button preview pane; this feature will also give the possibility to render the 3d button surface in transparency. 
    Simply load the needed background image using the Background menu item and then select the image, from your hard disk, using the Load image sub-item. Once loaded, you will have the possibility to drag the image around the preview pane keeping the left mouse button pressed and releasing it when you reach the needed position: after releasing the left mouse button, the 3D button under editing will refresh itself with the underlying image bits. Note that, acting on the Transparent factor field, you have the possibility to change the alpha channel transparency of the button surface and, acting on the Transparent zone combo box, you have the possibility to decide which zone of the button (when a Special effect is applied) will be affected by alpha channel transparency. 
     
    Once saved, the resulting 3D button image will appear exactly like this: 
     
    As you can see, the 3D button borders are perfectly anti-aliased and the background picture can be seen through the button surface. 
    Below you can see two 3D buttons displayed over the same image: the button on the left has the Transparent factor set to 1, the button on the right has the Transparent factor set to 128. In both cases a perfect anti-aliasing is applied. 
     
     
    Once again we need to specify that the image positioning could not be exactly the same once the 3D button will be inserted into the final page: it's up to you deciding if this method fits your graphical needs. 
     
     
     
     
     
     
     
    Copyright © 2000-2009 MultiMedia Soft 
    Return to index