Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
2 / 2 / 1
Регистрация: 28.09.2016
Сообщений: 98
1

Навигационные карты - map в HTML

24.03.2017, 23:34. Просмотров 1433. Ответов 3
Метки нет (Все метки)

Добрый день.
Есть код
HTML5
1
2
3
4
5
6
7
8
                        <li class="webdesign">
                            <a href="portfolio/5.jpg" rel="portfolio"alt="">
                                <img src="portfolio/5-thumb.jpg" alt="" >
                             <h2 class="title">Под водой на море</h2>
                                <span class="categorie">коралл, маска трубка </span> 
 
                            </a>
                        </li>
пытаюсь сделать что бы при наведении на один угол карты был текст " коралл " а на если навести на другой конец фотки была надпись " маска "
Пытаюсь добавить

HTML5
1
2
3
4
5
                                <p>
                                <map name="Map">
                                <area alt="тест" coords="1,11,180,49" href="" shape="rect" title="тест2">
                                </map>
                                </p>
Получается вот так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
                        <li class="webdesign">
                            <a href="portfolio/5.jpg" rel="portfolio"alt="">
                                <img src="portfolio/5-thumb.jpg" alt="" >
                             <h2 class="title">Под водой на море</h2>
                                <span class="categorie">коралл, маска трубка </span> 
                                <p>
                                <map name="Map">
                                <area alt="тест" coords="1,11,180,49" href="" shape="rect" title="тест2">
                                </map>
                                </p>
                            </a>
                        </li>
Но результат 0
Подскажите пожалуйста как реализовать правильно. сайт на локалке
Навигационные карты - map в HTML
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.03.2017, 23:34
Ответы с готовыми решениями:

Unfolding map непрорисовка оффлайн карты
Здраствуйте. У меня возникли проблемы с отрисовкой карты в оффлайн режиме. Вернее, сама карта...

Как заполнить дубликат карты (map)?
Есть тренажёр для развития интуиции. http://antimagiya.ru/lottos.php Для получения лучших...

Убрать сдвиг карты - map ( изображения )
Добрый вечер. Сделал карту- map по изображению. Все работает, но при выделение координат страница...

После снятия чексбокса метки не убираются с карты google map
в этом коде параметры буквенные я заменил чиловыми так как у меня в дб категории идут smallint, все...

3
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
25.03.2017, 00:06 2
HTML5
1
<img src="portfolio/5-thumb.jpg" alt="" usemap="#Map">
0
2 / 2 / 1
Регистрация: 28.09.2016
Сообщений: 98
25.03.2017, 00:27  [ТС] 3
mrtoxas, Не работает
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
25.03.2017, 00:35 4
Лучший ответ Сообщение было отмечено Anderos как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li class="webdesign">
  <a href="portfolio/5.jpg" rel="portfolio" alt="">
    <img alt="cyberforum_logo.png" src="https://www.cyberforum.ru/images/cyberforum_logo.png" usemap="#myMap" width="232" height="50" />
    <h2 class="title">Под водой на море</h2>
    <span class="categorie">коралл, маска трубка </span>
    <p>
      <map name="myMap" id="myMap">
        <area title="Logo" shape="poly" coords="2,15,37,3,67,13,36,47" />
        <area title="CyberForum" shape="poly" coords="72,24,230,27,229,41,67,42" />
    </map>
    </p>
  </a>
</li>
</ul>
http://codepen.io/anon/pen/wJXbae
Если проблема с указанием координат, пользуемся генератором
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.03.2017, 00:35

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Почему Google map долго грузит детали карты в определенных координатах?
Добрый день! Использую в приложении Google map. Обнаружил странную вещь: если переместить позицию...

HTML code in Image Map...Жду!!!
Доброго времени суток, прошу Вас помочь вот в чём: Уже который день пытаюсь прописать image map...

Навигационные клавиши мыши
Купил мышь и никак не могу привыкнуть к нестандартному назначению навигационных клавиш. Есть ли...

Навигационные свойства в подходе Code-first
Добрый день! Посмотрел Code First подход. Хочу попросить разъяснить мне одну вещь. Рассмотрим...


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

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

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