Follow this procedure by example to insert dynamic text into an image.
(i) Use a graphics package and fill a portion of the image with the same colour.
Above is an image with a road sign. The text in the sign will be coloured out so that dynamic text can be placed within the sign.
Now that we have an area within the image that is all the same colour we can use Smartfx to create an area that will support dynamic text.
(ii) Load the image into Smartfx. Use the horizontal tool first followed by the vertical line tool to place a rectangle just within the borders of the road sign.
(iii) Now click on the HTML icon or select HTML from the menu and select "Create HTML image table".
(iv) A save dialog will appear. Select a folder and a short filename to use for creating the output files.
Using the filename of "sign" the top three images from left to right will be called sign1-1.jpg , sign1-2.jpg and sign1-3.jpg.
The next row of images will be created as sign2-1.jpg , sign2-2.jpg and sign2-3.jpg and so on.
The image that contains the sign is called sign2-2.jpg.
(v) Load the sign image sign2-2.jpg into Smartfx. Under the Html menu select the "Copy image colour as HTML code to clipboard" option. This will read the colour of the sign and place the HTML colour code into the clipboard.
Load the html table into your web page and remove the image tag from cell 2-2. Using the clipboard set the cell background colour to match the colour of the text area (the sign). You can now insert your HTML code into this cell to place text onto the text area (the sign) within the image.
For this example sign.html is the html file that is automatically generated. The table html has been copied from this file and pasted below. The sign2-2.jpb img tag has been removed and the background color of the cell has been set to match that of the text area (the sign).
This code has been removed
<IMG src="Sign2-2.jpg" border=0 height=48 width=118>
and substituted with this code
bgcolor=#015a44><FONT size=2 color=#ffffff>Your Text Here</FONT>
The image table HTML code
<TABLE align="center" cellspacing=0 cellpadding=0 border=0 height=270 width=406>
<TR><TD><TABLE cellspacing=0 cellpadding=0 border=0><TR>
<TD><IMG src="Sign1-1.jpg" border=0 height=48 width=81></TD>
<TD><IMG src="Sign1-2.jpg" border=0 height=48 width=118></TD>
<TD><IMG src="Sign1-3.jpg" border=0 height=48 width=207></TD>
</TR></TABLE></TD></TR>
<TR><TD><TABLE cellspacing=0 cellpadding=0 border=0><TR>
<TD><IMG src="Sign2-1.jpg" border=0 height=57 width=81></TD>
<TD align=center valign=center height=57 width=118 bgcolor=#015a44><FONT size=2 color=#ffffff>Your Text Here</FONT></TD>
<TD><IMG src="Sign2-3.jpg" border=0 height=57 width=207></TD>
</TR></TABLE></TD></TR>
<TR><TD><TABLE cellspacing=0 cellpadding=0 border=0><TR>
<TD><IMG src="Sign3-1.jpg" border=0 height=165 width=81></TD>
<TD><IMG src="Sign3-2.jpg" border=0 height=165 width=118></TD>
<TD><IMG src="Sign3-3.jpg" border=0 height=165 width=207></TD>
</TR></TABLE></TD></TR>