Hi, hope this helps someone.
I have students course, when they pass I want to show them a pretty page "well done"
Its easy to make graphic nowerdays, I made a HUGE one and wanted to position the text for students name / course name etc EXACTLY in the right position AND control the font.
See Image 1 & 2 you will notice this image is 800 x 640
By making a html page I can call this up from server side code as
p_web.script( p_web.WindowOpen( 'webpages/endofcoursepass.htm' ) ) from my WebPages folder.
The htm is included here, basically you load your image - here its CpePass.gif
Then when you want text you can position a <div> to be in absolute postion - that is absolute to the page ! And you can have plain text like "Mary had a little lamb" or ANY variable from your server, or a list box etc.
In the section bellow I have the students name <!-- Net:s:LoggedInAs --> in nice bold letters, then I drop the font size for line two the course name and drop it again for the date. And for all those wondering about 16/9/2015 this is how the civilised world does it. <grin>
Image one is the GIF by itself, two shows the page without the GIF so you can see the text the server is drawing from its session variables and three is the page as the student sees it.
___________________________________________________________
ENDOFCOURSEPASS.HTM
<!-- NetWebServer -->
<Html>
<Head><!-- Net:c:Head --> <Title>MyCpe Pass</Title></Head>
<Body BGcolor="#ffffff">
<Img Src="CpePass.gif" UseMap="#map1" Border="0">
<DIV STYLE="position:absolute; top:120px; left:50px; width:500px; height:55px; font-family: Verdana;">
<CENTER><FONT SIZE="+4" COLOR="0000"><!-- Net:s:loggedinas --></FONT></CENTER>
</DIV>
<DIV STYLE="position:absolute; top:250px; left:70px; width:500px; height:45px; font-family: Verdana;">
<CENTER><FONT SIZE="+3" COLOR="0000"><!-- Net:s:Cou:Name --></FONT></CENTER>
</DIV>
<DIV STYLE="position:absolute; top:300px; left:90px; width:500px; height:45px; font-family: Verdana;">
<CENTER><FONT SIZE="+2" COLOR="0000">on <!-- Net:d:today --></FONT></CENTER>
</DIV>
<!--Net:c:BodyEnd -->
</Body>
</Html>
_______________________________________________________________
For anyone interested the graphics is from an old (1998) version of Image Styler
Took 12 mins to do a pass and fail page, anyone wants the .ist pleas email me.
____________________________________ Added
this is the same concept where a table is positioned in absolute terms
Image four, has a browse box positioned nicely around the graphics and a html button with js rollover to take the user back to the site.
Using <a Href="http://<!-- Net:s:RequestHost -->/indexPage" but could go anywhere.
[attachment deleted by admin]
Topic: Hint - How to float text over an image (Read 6826 times)