Hi All,

I am trying to place the text over the Images in the HTML file

I had refer some examples of HTML files that were built using tables and the image are placed as a background object in the table and the problem is the text data appears only at the bottom, right, left and center.

But the Images I have has text data are spread all the area over the images. The main objective is to enable the search option in my HTML without losing the image presentation of graphics as well as the text presentation – Where as the input file is full of Image with text data in between like-COMIC books.

Any help would be grateful.

__________________
Thanks,
Rocxy.

The best way I know of to have text over images is to do it using a css file. Then call the filename.css in the head section of the web page.

If you're asking what I think you're asking, this is so easy you'll kick yourself. On your webpage you need a block level element to contain the text. If there's a handy structure use it, otherwise just wrap the text in a div.

<div id="accessibleImageText">
Here's the text I want to appear on top of the image.
</div>

Then in your CSS file write...

#accessibleImageText {
background: url(../Images/TopRightCorner1.jpg) no-repeat;
top: 0;
right: 0;
width: 100px;
height: 100px;
}

Naturally you can use left right, and set whatever units and/or distances you want. The width and height of the HTML element should be identical to the image dimensions, whatever they are.

HTH,
Wayne

__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.

Thats great advice, thanks for the code, chroniclemaster! It works! Previously I did all kinds of workarounds to achieve text over image, like typing the text into the image via paint shop pro and then using that. The quality of the letters usually decreased though when the image was saved and used on the website. Oh well, no more.

_______________________________________
“Technology... is a queer thing. It brings you great gifts with one hand, and it stabs you in the back with the other.” - Carrie P. Snow
Check out my USB Flash Drive Blog.

It really is a beautiful technique. You can lay out whatever images you want to add texture and imagery to the website and still keep all the content in the XHTML file where anyone can access it. It avoids splitting your message between the XHTML and the images, and you can neatly avoid the text quality degradation that you've noticed.

PS Photoshop has the exact same problem; If you need to do something really special (like a homepage H1 title in distressed or very artistic font) I know a couple designers who actually export .psd files to Illustrator when they're finished to add text. Apparently that improves things a bit.

The other option which is accessible, but a bit more of a pain is to render your stylized text in Illustrator or Inkscape letter by letter (vector-based package is required, pixel-based editors don't typically produce good results). Just isolate each letter on it's own layer so you can produce each letter on it's own.

Then import the images into something like FontForge and have it trace the letters to generate a font from them (Note you can differentiate between a capital letter and a lower case, but you couldn't do two different Xs without messing with ligatures and things I don't know much about. Then you can embed your font into the page with Sifr. A little more work but really slick.

__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.