I have textured image to a sphere and attached label to the image, but some of the labels are overlapped, I want to seperate the labels, without changing the values of "lon" and "lat". I need to know how to seperate the labels or how to reposition the label. and also I have uploaded the image (link). And also I have uploaded the full code. please help me with the problem.

css code used in this program

div.spritelabel { position:absolute; top:0px; left:0px; color:#0000FF; font-family: 'Trebuchet MS', sans-serif; font-size:15px; font-weight:normal; line-height:15px; text-align: left; padding:5px; -webkit-box-shadow: 0px 4px 8px -3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 4px 8px -3px rgba(0,0,0,0.75); box-shadow: 0px 4px 8px -5px rgba(0,0,0,0.75); background:rgba( 255, 255, 255, 0.8 ); } a:link {color: brown; background-color: transparent; text-decoration: none;} a:visited{color: green; background-color: transparent; text-decoration: none;} a:hover{color: red; background-color: transparent; text-decoration: underline;} a:active {color: yellow; background-color: transparent; text-decoration: underline;}

javascript code