I've had a lot of requests on how I do my iframe, so I'll try to write a tut, I'm not too good at this but I hope I can explain it well enough that it makes sense. :)
1. I begin by opening a new file 800x600, there I arrange the images like I'd like the page to look.
I also add a background so that for larger resolutions you don't have a blank background.
2. I then take the image into PSP's image slicer and slice the image into sections.
If your buttons are on the image you can slice them also.
Now as for the coding, PSP will generate a table code for the image, I usually use it. If it has a blank.gif, you usually have to make sure it's transparent, as PSP won't make it that way. I just use my blank.gif that I made a long time ago.
Coding
You look in the code and find the part that you will put your text on. (in red).
You replace the img src tag with an iframe tag.
<iframe src="main.html" width="" height="" frameborder="0" name="iframe"></iframe>.You then make another html page naming it main.html and generate what you want in your text there, using the background that you have in your original image.
Your table code will look like this:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="800" HEIGHT="600">
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="193" HEIGHT="292">
<IMG NAME="pic0" SRC="pic_1x1.jpg" WIDTH="193" HEIGHT="292" BORDER="0"></TD>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="188" HEIGHT="292">
<IMG NAME="pic1" SRC="pic_1x2.jpg" WIDTH="188" HEIGHT="292" BORDER="0"></TD>
<TD ROWSPAN="4" COLSPAN="1" WIDTH="31" HEIGHT="600">
<IMG NAME="pic2" SRC="pic_1x3.jpg" WIDTH="31" HEIGHT="600" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="346" HEIGHT="58">
<IMG NAME="pic3" SRC="pic_1x4.jpg" WIDTH="346" HEIGHT="58" BORDER="0"></TD>
<TD ROWSPAN="4" COLSPAN="1" WIDTH="42" HEIGHT="600">
<IMG NAME="pic4" SRC="pic_1x5.jpg" WIDTH="42" HEIGHT="600" BORDER="0"></TD>
<TD WIDTH="1" HEIGHT="58">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="58" BORDER="0"></TD>
</TR>
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="346" HEIGHT="488">
<IMG NAME="pic5" SRC="pic_2x1.jpg" WIDTH="346" HEIGHT="488" BORDER="0"></TD>
Replace the image tag with the iframe tag, using the height and width in the iframe tag with the height and width of your image.
Your code will now look like this.
<TD ROWSPAN="2" COLSPAN="1" WIDTH="346" HEIGHT="488"> <iframe src="main.html" width="346" height="488" frameborder="0" name="iframe"></iframe></TD>
<TD WIDTH="1" HEIGHT="234">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="234" BORDER="0"></TD> </TR>
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="193" HEIGHT="308">
<IMG NAME="pic6" SRC="pic_3x1.jpg" WIDTH="193" HEIGHT="308" BORDER="0"></TD>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="188" HEIGHT="308">
<IMG NAME="pic7" SRC="pic_3x2.jpg" WIDTH="188" HEIGHT="308" BORDER="0"></TD>
<TD WIDTH="1" HEIGHT="254">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="254" BORDER="0"></TD>
</TR>
<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="346" HEIGHT="54">
<IMG NAME="pic8" SRC="pic_4x1.jpg" WIDTH="346" HEIGHT="54" BORDER="0"></TD>
<TD WIDTH="1" HEIGHT="54">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="54" BORDER="0"></TD>
</TR>
</TABLE>
If you have any questions don't hesitate to email me, it's actually easy after you do a couple.
Copyright © Dana Lea Moore, all rights reserved