Align Text by Coordinates!?!?

Hi,

I want to place some text on a big image I have on a page.

There is an exact room for the text in the image, so I would like to use coordinates somehow to place some text on the image at that spot.

I thought I might be able to do it using Image Maps?

Please help me out, I´m stuck!

I´ll pay $5 to the person that first gives the right solution.

Thanks

 

Is the image always in the same location on the page? If so, then don't bother with imagemaps, use CSS:

.mytext {
position: absolute;
top: 400px;
left: 200px;
}

<div class="mytext">this is my text</div>

That will place the text exactly 400px from the top and 200px from the left in the window. Just figure out the location of the image and you're all set.

 

Thanks for that Christian.

The image is always in the same spot, but our site is centered so depending on users screen resolution and browser window size the image can be on a different place in regards to coordinations.

Is there a way to use percentages instead, or to specify the coordinates within the actual page?

Looking forward to your reply.

 

You can use percentages instead:

position: absolute;
top: 25%;
left: 10%;

for example.

 

Or, if you have it like this:

<img src="theimg.jpg" />
<div class="mytext">this is my text</div>

Then:
.mytext { margin-top: -35px; }
Then alter this to wherever you want it, a negative margin will push it upwards over the picture..

Or alternatively add the image as a background to the DIV and add the text inside the DIV.