Размещайте текстовые элементы в относительных местах внутри круга - PullRequest
Новая
       6

Размещайте текстовые элементы в относительных местах внутри круга

0 голосов
/ 28 декабря 2010

Прямой вопрос - Как бы я поместил определенные объекты или небольшой текст в определенной области. Например, как бы заменить следующее изображение на html / javascript.

--- Мне не хватает представителей для публикации изображения: / но попробуйте этот URL - http://i.stack.imgur.com/a3eWL.jpg

Большая картинка - я пытаюсь создать файл kml для Google Earth, чтобы при нажатии на точку появлялось окно описания аэростата, и я мог отобразить свою отформатированную в формате html диаграмму, показывающую местоположение спутников в данный момент. Документы Google Планета Земля и KML допускают практически любое html-форматирование, поэтому в настоящее время ищут хороший способ сделать это.

Отказ от ответственности: Прошло несколько лет с тех пор, как я занимался редактированием html или javascript, поэтому общие примеры и понимание замечательны.

Спасибо

Ответы [ 2 ]

1 голос
/ 29 декабря 2010

По сути, нижеприведенный раздел - это то, что я сделал. 

<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>

Последний div - это метки, которые размещены где угодно.% D являются целочисленными значениями (из моего кода на python)

Кроме того, вот рабочий пример.Реквизит Нико http://jsfiddle.net/94Kzt/72/

1 голос
/ 28 декабря 2010

Вы можете просто создать несколько <div> с абсолютным позиционированием, которые вы будете перемещать, используя их top и left свойства CSS.

Быстрый пример здесь: http://jsfiddle.net/94Kzt/ (примечание: я использовал JQuery, чтобы сделать это быстро, но его легко изменить, чтобы использовать стандартные вызовы манипуляции с JS DOM)

...