Place text based divs in relative locations within a circle

Direct question - How would I place certain objects or small text within a certain area. For example, how would I replace the following image with html/javascript.

--- I don't have enough reps to post an image :/ but try this URL - http://i.stack.imgur.com/a3eWL.jpg

Big picture - I am trying to create a kml file for Google Earth that when the point is clicked, the balloon descrip开发者_Python百科tion window pops up and I can display my html formatted diagram showing where the satellites are at that instant. Google Earth and KML docs allow for pretty much any html formatting within it, so currently looking for a good way to do this.

Disclaimer: It has been a few years since i have done any html or javascript editing, so general examples and insight is greatful.

Thanks

You can just create some absolute positioned <div>s that you move with their top and left CSS properties.

A quick example here: http://jsfiddle.net/94Kzt/ (note: I used JQuery to do it quickly, but it is easy to modify it to use standard JS DOM manipulation calls)

Essentially the below section is what I did.

<div style="display: block; position: relative; width: 300px; height: 300px; border: 1px solid black; background: gray;">
    <div style="position:absolute; width: 296px;height: 296px;background-color: transparent;border: 2px #a72525 solid;   -webkit-border-radius: 148px;   border-radius: 148px;"></div>
    <div style="position:absolute; width: 148px;height: 148px;top: 72px;left: 72px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 75px;border-radius: 75px;"></div>  
    <div style="position:absolute;  width: 4px;   height: 4px;top:148px;    left:148px;    background-color: black;"></div>  
    <div style="position: absolute; font-size: 0.8em; color: #222222; top: %dpx; left: %dpx;">%d</div>    
</div>

The last div are the labels that are placed wherever. The %d are integer values (from my python code)

In addition, here is the working example. Props to nico http://jsfiddle.net/94Kzt/72/