Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
1

Как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку?

17.07.2017, 12:29. Просмотров 1629. Ответов 16
Метки нет (Все метки)

Подскажите пожалуйста как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку?





Сам лендинг сайт расположен в папке www.profnaviki.ru/vospitateli/index.html



вот кусок кода код файла index.html где выводится карта

чтобы я не менял - карта удаляется вместе с модуле контактной информации на ней...

А мне этот модуль очень нужен

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="maps" class="bl">
        <div id="map"></div>
            <div class="bl_center">
                <div class="map_info">
                    <span class="title">Контактная информация</span>
                    <div class="list l1">
                        <span class="b">Тел.: +7 (495) 258-07-91</span> (Нажмите и мы позвоним Вам сами в течении 10 минут)
                        <br />Тел.: +7 (495) 258-07-91
                    </div>
                    <div class="list l2">
                        Звонки принимаются ежедневно с 9:00 до 20:00 по
                        <br />Московскому времени.
                    </div>
                    <div class="list l3">
                        <span class="b">Адрес:</span> г.Москва, 60 лет Октября, д.9, стр. 2, оф.612
                        <br />Обучение проводится дистанционно, в любом городе!
                    </div>
                    <div class="list l4">
                        Почта: <a href="maito:info@маэо.рф">info@profnaviki.ru</a>
                    </div>
          </div>
      </div>
        </div>

Прикладываю два файла - index-style.zip



Заранее признателен
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.07.2017, 12:29
Ответы с готовыми решениями:

Java Android - сделать кнопку "показать адрес на карте", которая вызывает яндекс-карты или яндекс-навигатор и гугл-карты
Доброго дня, формучане! Подскажите, как сделать возможность из моего приложения при клике по...

Как сделать вместо формы картинку
Подскажите как сделать вместо формы картинку. Как допустим в патчерах многих игр для обновления...

Как сделать фоновую картинку вместо белой страницы?
Всем добрых суток! Задался вопросом,как сделать фоновую картинку вместо белой страницы?На скрине...

Яндекс карты: Как сделать так что бы при выборе координаты с БД отмечались на карте?
Есть БД с координатами и есть вьюха с яндекс картой. Как сделать так что бы при выборе координаты с...

Ресурс не найден (404) Яндекс ищет .htm вместо .html
Привет. Cайт www.freshsound.org движек dle 8.3 - лицензия Неделю назад резко, почти в 2 раза,...

16
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
17.07.2017, 12:46 2
А просто не подключать скрипт с картой? И все, проблема решена.
0
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
17.07.2017, 13:05  [ТС] 3
Нет... Вместо скрипта вставить картинку такого же размера....
Чтобы поверх картинки оставался модуль с контактами [del]
Как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку?
0
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
17.07.2017, 13:59 4
Убрали скрипт, и на его место, в div id="map" вставляем картинку нужного размера, хоть бекграундом, хоть img, в чем проблема то?
0
17.07.2017, 13:59
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
17.07.2017, 14:14  [ТС] 5
Я это и хотел
Думал что вместо

HTML5
1
2
3
4
5
6
7
8
<div id="maps" class="bl">
        <div id="map"></div>
            <div class="bl_center">
 
Я поставлю
<div id="maps" class="bl">
        <img src="img/welcome.jpg" alt="" title="" />
            <div class="bl_center">

Но получается полная фигня
Карта пропадает, но модуль с контактами съезжает вниз, вообще ниже футера
0
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
17.07.2017, 14:39 6
убираем скрипт, меняем в html
HTML5
1
2
3
4
5
<div id="maps" class="bl">
<div id="map">
<img src="img/welcome.jpg" alt="" title="" />
</div>
<div class="bl_center">
0
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
17.07.2017, 17:59  [ТС] 7
И так я делал... карта при этом вниз уехала
[del]
Как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку?


Если удалить div карты
HTML5
1
<div id="map">
то вместе с ней пропадает и модуль с контактами =)))

 Комментарий модератора 

1. Изображения и любые другие файлы загружайте на форум!
2. Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!
0
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
17.07.2017, 18:31 8
Лучший ответ Сообщение было отмечено vkul как решение

Решение

не надо удалять див карты, надо удалить сам скрипт!
вобщем с 24 по 65 строку в index.html
1
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
17.07.2017, 20:45  [ТС] 9
ааа! Вот спасибо!!!

Добавлено через 20 минут
блин походу вставкой картинки не получится:
картинка вылезла за пределы модуля раздвинув сайт
[del]
Как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку?


Придется во внутрь этого модуля вставить фон, чтобы картинка обрезалась и не растягивала сайт...
но вот в этом диве есть несколько классов где описываются фоны и куда именно вставлять этот фон непонятно... сможете подсказать?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#maps {
    height:520px;
    position:relative;}
#maps #map{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#ccc;}
#maps .map_info{
    float:left;
    position:relative;
    z-index:10;
    background:rgba(255,255,255,0.8);
    padding:40px 35px 20px;
    width:420px;
    margin-top:80px;
    color:#000;}
#maps .title{
    float:left;
    width:100%;
    margin-bottom:15px;
    font:300 34px open sans;}
#maps .list{
    float:left;
    width:100%;
    margin-bottom:20px;
    padding-left:35px;
    font:300 14px open sans;}
#maps .l1{
    background:url(img/d1.png) no-repeat 0 3px;}
#maps .l2{
    background:url(img/d2.png) no-repeat 0 3px;}
#maps .l3{
    background:url(img/d3.png) no-repeat 0 3px;}
#maps .l4{
    background:url(img/d4.png) no-repeat 0 3px;}
#maps .b{
    font:700 14px open sans;}
#maps .list a{
    color:#33a6dc;
    font:300 14px open sans;}
#maps .list a:hover{
    text-decoration:none;}
0
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
18.07.2017, 10:51 10
просто пропишите для картинки max-width: 100%
0
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
18.07.2017, 18:04  [ТС] 11
привет, спасибо MoreAnswers, посмотрел - но все варианты довольно сложные для меня...

решил сделать так
HTML5
1
2
3
4
<div id="map">
<img src="img/welcome1.jpg" max-width=100% title="" />
</div>
<div class="bl_center">
Но картинка не уменьшается...
может применяю неправильно?
0
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
18.07.2017, 19:39 12
max-width в стилях прописать нужно, в хтмл такого свойства нету
0
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
18.07.2017, 20:56  [ТС] 13
Да, пытался

Руководствуясь тем что размер картинки задается классом .bl

HTML5
1
2
3
4
5
<div id="maps" class="bl">
<div id="map">
<img src="img/welcome1.jpg" title="" />
</div>
<div class="bl_center">

в файле
style

вписывал вместо
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.bl{
    float:left;
    width:100%;}
.bl_center{
    width:1000px;
    margin:0 auto;}
 
.bl{
    float:left;
    max-width:100%;}
.bl_center{
    max-width:100%;
    margin:0 auto;}
Уменьшаются только картинки сверху...
Наша картинка остается такой же...
0
ArtyomOsp
1 / 1 / 0
Регистрация: 05.07.2017
Сообщений: 5
18.07.2017, 21:10 14
можешь просто вставить скриншот или в конструкторе карт яндекса перед тем как копировать код выбери "статическая"
0
AlexZaw
976 / 861 / 382
Регистрация: 07.08.2016
Сообщений: 2,571
Завершенные тесты: 2
18.07.2017, 21:11 15
CSS
1
2
3
#map img {
max-width=100%
}
0
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
19.07.2017, 19:58  [ТС] 16
Это был бы самый шикарный вариант!

но он не работает:
[del]
Как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку?
0
vkul
0 / 0 / 0
Регистрация: 17.07.2017
Сообщений: 11
22.07.2017, 17:00  [ТС] 17
в общем решение не нашел - пришлось просто уменьшать картинку

спасибо за помощь!
0
22.07.2017, 17:00
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.07.2017, 17:00

Как сделать кнопки\формы на лендинге через ворд пресс? (до этого была верстка форм на хтмл)
В общем, беда такая. Сделали сайт, сверстали, залили на хостинг - все работает. Потом залили...

Яндекс и Google карты offline, нужно сделать приложение на сайте
Здравствуйте. Мне нужно сделать сайт на php по следующим условиям: 1) нужно сделать карту...

Сделать вместо обычной заливки фона картинку
как сделать вместо обычной заливки фон картинку? import pygame window =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.