Image Map Captions? 1

[DaProgrammer]

Dear All,
Im sure that this can be done, but I am wanting to make an image and on certain coordinates, input data from an XML file across the web. I know how to insert the XML data into anywhere on the page, but i do not know how do this over an image at designated coordinates. PLEASE HELP!

Thanks,
DaProgrammer

"As a circle of light increases, so does the circumference of the darkness around it." - Albert Einstein

 

[gohankid77]

I think this can be done using CSS. If you position a <span> element absolutely, it should work:

<style type="text/css">
span.imgcaption {
position: absolute;
left: x;
top: y;
}
</style>
.............
<span class="imgcaption">Your caption</span>

This should work if your browser is able to use absolute positioning. Since it is absolute, you can put it anywhere in the body as long as it is within a block element.

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[DaProgrammer]

I am unfamiliar with CSS. Could you give me a bit more of an idea or an alternative?

THANKS MUCH,
DaProgrammer

 

[DaProgrammer]

OK! Scratch that last one as i have figured it out partially. I can get the caption on the image, but if i put the Span statement after the image it is nolonger in it. So, it has to be before. In that case, however, I am unable to adjust the text, without adjusting the image. Help??!?

-Thanks,
Eric

 

[gohankid77]

Can you post a URL to the page with the problem or post some code?

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[DaProgrammer]

http://ysw.port5.com/text1.htm

I will eventually need several temperature inputs all over the map in their respective position.

 

[gohankid77]

Heh... Sorry. For the left: x; and the right: y;, I meant you should put x and y values in for each text element.

Example:

span.imgcaption {
position: absolute;
left: 100px;
top: 50px;
}

This means:

Position any span element with a class of "imgcaption" absolutely 100 pixels from the left side of the screen and 50 pixels from the top of the screen.

Hope that helped a bit more!

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[DaProgrammer]

Ok, but two things:

1. How do i add more items in different positions?
2. By declaring a designated position, won't it change when in different screen resolutions?

Thanks

 

[gohankid77]

1. span.imgcaption1 {...

2. No. The positions of the items will stay the same. I did notice however that your image is centered. This will cause a problem with absolute positioning.

Perhaps someone with more experience (vragabond, HELP!) can assist you.

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[DaProgrammer]

Dear All:

Problem solved. Here's an interesting (yet simple) method to do what I was wanting. Take a table and fill it with cells. You can merge where needed to expand data area. Then simply put the image you want as a background. I hadn't thought of that until recently. Thank you though for your help though gohankid77 (a star for you to).

-Eric