Можно ли вывести текст «прозрачный» для мыши или не перекрывающий слой с iframe полностью?

Question

[Алексей]

Вывожу карту в заголовке iframe echo '<iframe...';
selftrips.ru/strany-i-mesta/aziya/tailand/pkhuket-...
Как поверх этого фрейма разместить текст (название сайта), так чтобы карта осталась кликабельная, хотя бы в частях свободных от текста?
Как позиционировать текст?
Может надо как то по другому карту выводить?

Comments

[twobomb]

чё

Answer 1

[Ankhena]

Это чтоль?

Comments

[Алексей]

наверное, а как сам текст вывести поверх iframe?

[Ankhena]

Алексей, https://webref.ru/css/position и вероятно https://webref.ru/css/z-index

[Алексей]

Ankhena, я в том смысле что iframe я никак не позиционирую, теперь как относительно него вывести поверх него текст?
Или даже по другому.
Вообще можно попробовать включить вывод название сайта. Только как iframe под него засунуть?

[Ankhena]

Алексей, сделайте им общего родителя, относительно него и позиционируйте.

[Алексей]

Ankhena, можете в песочнице пример показать?
https://codepen.io/selftrips/pen/OOVZNY

[Ankhena]

Алексей, https://jsfiddle.net/xjra9bpv/

[Алексей]

Ankhena, Спасибо, буду пробовать.

[Алексей]

Ankhena, А еще не подскажите можно ли как то просто (т.е. средствами css html) сделать так чтобы после первого действия с картой, попытка изменения масштаба или сдвига, т.е. какие то действия мыши) карта начинала перекрывать текст (т.е. текст исчезал?)

[Ankhena]

Алексей, на JS, по клику на область карты заменять класс для текста. В класс писать display:none.

[Алексей]

Ankhena, а без js нет вариантов?

[Алексей]

Ankhena, может с использованием трансформаций? Типа если мышь в области текста он вместе с фоном становится полностью прозрачным... так нельзя сделать?

[Ankhena]

Алексей, хм..
можно
карта:hover + текст {display:none}

только блок с текстом должен в коде идти после карты

[Алексей]

Ankhena, можете пример в песочнице показать? Ещё вопрос относительно чего идёт позиционирование? Можно ли его указывать в %% от высоты карты?

[Ankhena]

Алексей, Чего? Чье позиционирование? Внутрь гугло-скрипта вы свой спан без JS не запихнете. Соответственно, если высота родителя равно высоте карты, то все и получится.

[Ankhena]

Алексей, смотрите: https://jsfiddle.net/uxxy73j3/

[Алексей]

Ankhena, а вот с этим вопросом не поможете? Как вывести google карту вместо изображения заголовка, но оставить текст названия сайта?

Т.е. все то же самое, но только текст формируется темой.

[Алексей]

Ankhena,

смотрите: https://jsfiddle.net/uxxy73j3/

в IE не работает?

[Ankhena]

Алексей, в ИЕ какие-то сложности с восприятием либо iframe либо гугло карт. Смотрите разницу. Сами по себе стили, если заменить iframe на div, естественно, работают, потому что в них нет ничего такого.

Answer 2

[Philipp]

Совершенно неясно зачем там эта карта сверху. Логичнее ее расположить под заголовком статьи.
Нанести название можно с помощью обычного блока текста с заданной шириной.

<div style="position: relative">
<iframe style="z-index: 0" src="#"></iframe>
<div style="z-index:1;position: absolute; left: 10px; top: 40px;width: 50px;height: 16px;background-color: rgba(5,5,5,0.1)">Site Name</div>
</div>

Comments

[Алексей]

неужели действительно так плохо? ((
Мне казалось я нашел карте хорошее место...
а вот такая карта тоже плохо?
selftrips.ru/category/strany-i-mesta/aziya/tailand (это картинка, по клику на настоящую карту перебрасывает)

[Philipp]

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

[Алексей]

Philipp, Легко можно сделать (нашел плагин) карту стран с кликами по странам - > в рубрику соответствующей страны. Единственное что плохо - карта флеш, но разработчик обещает через пару месяцев перевести на что то более нормальное.