SdelaemBlog

Создание Сайтов и их настройка

Создание карты изображения в HTML.

Главная Статьи HTML & CSS ВидеоКурс HTML Создание карты изображения в HTML.

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

В прошлом видео уроке мы как раз начали знакомство с картами изображений в HTML. Посмотрели, как она должна выглядеть в конечном итоге, правда, с применением скриптов. Немного поговорили о координатах. То есть о том, как мы их будем определять. Как Вы можете помнить, я остановил свой выбор на одном из способов, это способ с использованием атрибута ismap, так как, на мой взгляд, именно этот метод определения координат является самым простым и менее сложным, а значит именно он нам подходит.

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

Теперь настало время приступить к непосредственному созданию карты изображения в HTML. В этом видео мы охватим довольно большое количество информации, начиная с теории и переходя к практике.

Создание карты изображения в HTML.

Начнем с изучения еще двух HTML-тегов, это теги <map> и <area>. Именно эти теги предназначены для создания карты изображения в HTML-документе.

HTML-тег map.

Тег <map> создает некий контейнер, в котором будут указаны активные области. При добавлении тега <map> в HTML-документ мы не увидим каких-либо изменений на странице, так как этот тег не добавляет какую-либо информацию. Он просто создает контейнер, который будет обозначать начало карты изображения и ее завершение.

Данный тег имеет обязательный атрибут name. В котором мы должны указать имя нашей карты изображения. Кроме того стоит отметить что этот тег не является блочным элементом, а значит необходимо его прописывать внутри блочного элемента, например тега абзаца или универсального тега div.

HTML-тег area.

Тег <area> отвечает за указание активных областей внутри контейнера <map>. Именно этот HTML-тег определяет активную область внутри изображения, указывает какую фигуру мы, при этом используем, указывает описание, с помощью обязательного атрибута alt, и самое главное, с помощью атрибута coords для тега <area> мы можем указать координаты активных областей карты изображения.

Здесь также хочу упомянуть о том, о чем забыл сказать в видео уроке, что этот тег легко заменяется тегом для указания гиперссылок в HTML-документе. То есть тегом <a>. Если Вы помните, то именно у тега <a> есть точно такие же атрибуты shape и coords, которые предназначены именно для указания базовой фигуры и ее координат.

Определение координат квадрата, прямоугольника, круга и многоугольника.

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

Сначала мы подробно рассмотрим в теории как определить координаты для квадрата, затем для окружности и наконец, для многоугольника.

После чего на живом примере мы определим координаты квадрата и прямоугольника. Затем определим координаты окружности. И наконец, укажем координаты треугольника, который свою очередь играет роль многоугольника.

В общем, это видео станет очень полезным пособием для тех, кому стала интересна тема создания карт изображений в HTML.

Видео урок: Создание карты избражения в HTML.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео уроке мы окончательно изучим тему создания карт изображений, поговорим о последнем атрибуте тега <img> usemap, который поможет нам связать картинку с картой изображения. И рассмотрим еще парочку живых примеров карт изображений на разных картинках.

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментарии

  1. Михаил Веб

    @ Григорий:
    Давайте — давайте. Когда человек не понимает банального, не имеет смысла что-то объяснять

    1 год назад11.07.2016 Ответить
  2. Григорий

    Михаил. Давайте не будем переливать из пустого в порожнее. В статье об этом нет ни слова. Я эту проблему решил для себя — а вам советую попробовать выполнить то что вы рассказали у себя на сайте -реализовать практически, возможно потом мы поймем друг друга. Ответите вы на этот пост или нет, в принципе не важно (можете его совсем удалить), у меня нет времени на пустую переписку. Прощайте

    1 год назад08.07.2016 Ответить
  3. Михаил Веб

    @ Григорий:
    Собственно в статье это и описано

    1 год назад07.07.2016 Ответить
  4. Григорий

    Михаил Веб пишет:

    @ Григорий:
    А в чем собственно проблема?
    И зачем шорткод?

    Откровенно говоря — я не понял реплику. А проблема изложена в самом вопросе — вывести карту c активными областями (выделение при onmouseover — и ссылка на другую страницу по onclick) на странице WordPress.

    1 год назад07.07.2016 Ответить
  5. Михаил Веб

    @ Григорий:
    А в чем собственно проблема?
    И зачем шорткод?

    1 год назад07.07.2016 Ответить
  6. Григорий

    Посмотреть было бы интересно — но все это я уже знаю. А вот вывести на странице в Вордпресе карту с активными областями никак не получается. В Джумле вывел через модуль. В вордпересе — через шорткод — не работает. Дополните материал — разделом размещения на сайте — людям будет очень полезно и интересно.

    1 год назад05.07.2016 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: