Как разместить HTML-элемент над плагином Google Планета Земля? Включает wmode, я представляю - PullRequest
11 голосов
/ 03 февраля 2009

У меня возникли проблемы При наложении HTML-тега над плагином Google Планета Земля в веб-приложении любая помощь будет принята.

Это хорошо для карт, рельефа местности и гибридного режима, но в режиме ' Земля ' включается флэш-память и автоматически накладывает карту сверху .

Z-индексация не помогает.

Предположительно, я мог бы сделать что-то вроде:

document.getElementById('flashDiv').setAttribute('wmode', 'opaque');

но, учитывая, что материал Google компилируется на лету, это делает его намного более сложным. Просмотр сгенерированного кода здесь не помог. Опять же, из-за того, что он компилируется на лету, такие вещи, как SWFObject не могут спасти день ...

Кто-нибудь сталкивался с чем-нибудь подобным? Я провел утро, рыча в группе API Google Планета Земля без особой пользы.

Обновление : После еще большего растягивания волос ответ может лежать с вставкой iframe . Возможно, я также пришел к выводу, что плагин основан на Flash. Исследуя ...

alt text
(источник: googlepages.com )

Ответы [ 5 ]

16 голосов
/ 12 августа 2009

Я собрал демо, показывающее, как использовать IFRAME прокладки здесь:

http://earth -api-samples.googlecode.com / SVN / багажник / демки / customcontrols / index.html

5 голосов
/ 07 марта 2009

Нет прямой поддержки наложения «z-indexing» на div в Api или Dom. Плагин загружает исполняемый файл, который, в очень простых терминах, пробивает дыру в окне браузера. Использование метода «iframe shim» является стандартным решением, хотя прозрачность может быть сложной.

Существует запрос открытой функции для добавления этой функции в API - в разделе комментариев есть полезная информация и ссылки.

Также здесь есть отличная демоверсия

3 голосов
/ 04 марта 2009

Изучив, как пользователи Google встраивают код, похоже, что он с iFrame. Тем не менее, если у вас возникли какие-либо проблемы со вспышкой, см. Ниже ...

Попадание в аналогичные ситуации при попытке отобразить раскрывающуюся навигацию по элементу Flash (или HTML по видео YouTube). В игру вступило несколько факторов.

Первым был мой html-элемент, который я хотел навести на элемент flash, должен был быть html-элемент одного уровня со свойствами css, установленными для каждого элемента sibling, а также для родительского элемента div. Так, например:

<div id="parent">
  <div id="sibling"></div>
  <embed id=”flash”><other script code></embed>
</div>

Тогда мой css будет

//.parent may not need to be set to relative
#parent   { position: relative; }
// the value on sibling1 just needs to be higher than .sibling2
#sibling  { position: relative; z-index: 20; }
#flash    { position: relative; z-index: 10; display:inline }

Еще одна вещь, на которую стоит обратить внимание, это то, что вашей вспышке нужно установить прозрачный параметр wmode.

Этот трюк работал для различных приложений флэш-памяти, а также для YouTube-видео. Хитрость заключается в том, чтобы убедиться, что HTML, который вы хотите отобразить на флэш-памяти, является родственным элементом для фактического флеш-кода, а не родительского div, z- Индекс для html, отображаемого над флэш-памятью, выше, чем у элемента flash, для обоих элементов html их позиционирование установлено на относительное или абсолютное, а для параметра wmode установлено прозрачное.

Надеюсь, это поможет, но я думаю, что ваша проблема связана с iFrame.

3 голосов
/ 02 марта 2009

Если это плагин, то вы не можете надежно разместить другие элементы поверх него. Браузеры обычно отказываются от большей части своих возможностей «наслоения» элементов, когда задействованы плагины.

Я думаю, что Iframe может быть обходным путем, если вы убедитесь, что это работает в большинстве браузеров.

0 голосов
/ 22 июля 2014

установить z-индекс "iframe" на 100

и установите div, отображаемый в верхнем z-index, равным 200 (div должен быть как минимум относительно позиции)

...