Home | FAQ | Download | Buy | Features | Samples | About us | Testimonials | Affiliates | Link to us
 

How to add a background picture to a Table.

In this tutorial I will explain to you how to ad a background picture to a table instead of to the entire background area as discussed in the "How to add a background picture and render the Flash animation transparent"

You can use your HTML editor as long as there is an option that allows you to hand-code your HTML code.

1. Create a Flash animation in Anim-FX. I used the Flare animation.
Set the background color in Anim-FX to transparent.

2. Save the text file.

3. Go to your C:/Program Files/Anim-FX directory and copy (CTRL-C) and paste (CTRL-V) the Flare.SWF and Flare.TXT to your website directory.

4. Open Notepad or launch your HTML editor and open an existing html file or create a new file from scratch.

5. To Create a table Copy and paste the HTML code below into your html document. If you use an existing HTML page you only must use the (red) section only. This will create ab basic table with a width of 300 and a height of 100.

<html>
<head>
</head>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

</table>
</body>
</html>

5. To insert a a picture you must add the background tag to the html code background="background.jpg" Many HTML editors will have a standard feature for this.

<html>
<head>
</head>
<table width="300" height="100" background="background.jpg" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

</table>
</body>
</html>

5. Finally we will insert the Flash animation to do this please refer back to How to add a background picture and render the Flash animation transparent. Eventually your code should look something like this

<html>
<head>
</head>
<table width="300" height="100">
<tr>
<td>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="300" height="100" align="top">
<param name=movie value="flare.swf">
<param name="BGCOLOR" value="#FFFFFF">
<param name=quality value=high>
<param name="SCALE" value="noborder">
<embed src="flare.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode=transparent width="300" height="100" scale="noborder" align="top">
</embed>
< /object>
</td>
</tr>

</table>
</body>
</html>


6. If you want to be able to "see through" the animation to see a background picture underneath the SWf file, you should make the animation transparent. To do this you must do the following.

a. In Anim-FX set the background color to transparent.
b. Add the transparency tag to the HTML code. (see below)

In the object section (for I.E)

<param name=wmode value=transparent>


In the Embed section (for Netscape/mozilla)

wmode="transparent"