Ray's Test Page - Adding Text to an Image
The idea is to add text to the following image...
The text can be added directly to the image using an image editor...
Or by combining the following two images...
The base image is placed on the page, in this case by using...
<img border="0" src="skelnote.gif" width="128" height="128" style="position: absolute; top: 700; left: 50">
The "Hello" image can then be placed on top of the skeleton by using ...
Unfortunately, using absolute positioning doesn't always work. You need to have full control of the page to be able to do this. On hosts that add adverts to your page the images could end up anywhere. In this case, the thing to do is put your main image on the page, followed directly by the second.
Now you can add a relative position to the second to move it from where it was to where it should be. In this case the code now becomes...
<p align="center"><img border="0" src="skelnote.gif" width="128" height="128">
<img border="0" src="hello.gif" width="67" height="39" style="position: relative; top: -50px; left: -100px"></p>
This can be done with text too...
Hello
Hello
<p align="center"><img border="0" src="skelnote.gif" width="128" height="128">
<b><font size="5" color="#FF0000" style="position: relative; top: -60px; left: -95px">Hello</font></b></p>
This page created 9th December 2004, last modified 11th December 2004
