Как сделать область html
Обновлено: 04.07.2024
Чтобы только нужная часть изображения стала ссылкой, нам необходимо воспользоваться тегом MAP. Данный тег дает возможность делать карту из картинки. Можно сделать, чтобы область была прямоугольная, круглая, многоугольная. Для начала нужно прописать этот тег и присвоить ему нужно имя. В дальнейшем это имя мы прикрепим к тегу IMG с помощью атрибута USEMAP. Для каждой области прописываем отдельные координаты в теге AREA. В этом же теге прописываем нужную ссылку. А теперь разберемся с самого начала.
Добавим на страницу тег MAP и прикрепим к изображению имя карты, например, knopka.
Вместо троеточия вставим пропишем тело карты, т.е. области для ссылок. Собственно, одна область – это один тег AREA.
Давайте разберемся. Area – это сам тег, а остальное – его параметры. Shape – это вид области. Может принимать значения: rect (прямоугольник), circle (окружность), polygon (многоугольник), default. От этого зависят координаты. Для прямоугольника нужны четыре числа, а для окружности – три числа, т.е. первые два числа – это первая точка, а третье число – это радиус. Надеюсь, понятно, что означают следующие параметры, это ссылка и подсказка.
Координаты точек советую брать через Paint, т.к. там они отображаются в нижней части экрана.
Изучаю HTML не так давно и от совокупности информации попросту запутался.
Что нужно сделать:
Нужно сделать так чтобы по центру страницы была рабочая область. Она из себя будет представлять прямоугольник со скругленными углами. Этот прямоугольник имеет обводку с эффектами(тени и тд.) именно по этому я решил все сделать через нарезку картинок. В этой рабочей области и будет весь контент сайта.
Как я это вижу:
Нужно нарисовать необходимую область в графическом редакторе (что уже сделано) и разбить её на части.
4 части - это края - левый верхний, правый верхний, левый нижний и правый нижний.
2 части - это верхняя и нижняя части прямоугольника
2 части - это правая и левая часть прямоугольника
ну а сам центр прямоугольника будет забит через bg в css
В рабочей области будет сидеть php, а вот html'евскую часть я что-то не могу сообразить как правильно сделать. Так же хотелось бы чтоб во время действий php, сайт растягивался в необходимую сторону (в бока или вниз) плавно а не дергался сразу рывком, не подскажите как это можно сделать?
В общем хотелось бы узнать ваше мнение как это проще( лучше ) сделать? (имеется сама рабочая область (прямоугольник))
Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.
Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript'ом.
Что же, начнём?
Самые нетерпеливые, могут сразу посмотреть демо, но я предлагаю читать обо всём по порядку.
Готовим карту
Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.
Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)
Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов
стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, для регионов и для городов.
Далее, в секции изображения помещаем до боли знакомое:
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff.
Результат:
Вставляем SVG в HTML
Достаточно подробно этот процесс был освещён в хабратопике К вопросу о кроссбраузерном использовании SVG.
Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:
Подводные грабли
Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так:
Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
Diff.
После этого ситуация значительно улучшается, но другую граблю нам подкладывает Google Chrome: он упорно стремится смасштабировать картинку по высоте до высоты элемента , а не увеличить высоту согласно ширине тега и пропорциям изображения, как ведут себя остальные браузеры.
Жаль. Придётся привлечь JavaScript и подогнать высоту элемента вручную.
Diff.
Результат:
Взаимодействуем с SVG
Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно — он уже часть DOM веб-страницы.
Получить доступ к SVG, вставленным через чуть сложнее:
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам ( jQuery(".class") ). Приходится извращаться.
3 августа 2012 Создание сайтов
Сегодня столкнулся с проблемой, как сделать не всю картинку ссылкой, а только часть картинки, точнее часть картинки — одна ссылка, а остальная часть — вторая ссылка. На самом деле есть такой тег , с помощью него можно указать область, которая будет ссылкой.
Как сделать ссылку внутри картинки?
Значит тег объединяет показатели , которые указывает в каком месте будем ссылка в картинке с названием name. Короче, проще на картинке показать, чем язык сломать. Вот у нас есть картинка, для простоты объяснения это квадрат и он имеет 4 разноцветных поля.
Так вот вместе с позволяет нам сделать например 4 ссылки на этом квадрате, чтобы при нажатии на красный квадрат — открывалась одна ссылка, зеленый — другая и тд..
Атрибуты могут быть 1) областью в виде окружности (circle); 2) область в виде многоугольника (poly); 3) в виде прямоугольника (rect)
Нам тут ясное дело проще всего будет прямоугольник, т.к там нужно указывать все 2 координаты. Пишем . Координаты пишутся через запятую и все 4 (в данном случае). Наш квадрат размерами 150×150, соответственно красный квадрат будет в координатах примерно 0,0,75,75 ну и остальные по аналогии. Получается:
— красный
— синий
— зеленый
— желтый
Чтобы при наведении было описание в area добавим title и ссылку поставим на категорию html, где можно посмотреть другие html-теги и как их использовать. Вот что получилось.
Код получился вот такой:
Теперь, по-аналогии, я думаю, вы сделаете любую карту для любой картинки. немного подумать и главное указать правильные координаты. 😉 Если вдруг вам проще читать технический язык, а не мои распинания, то на хтмлбук по тегам map и area можно найти его.
Надеюсь, эта статья поможет раскрутке сайта, т.к подобная статья про якори в html частенько приносит посетителей. Главное выбрать нужные ключи и продвигать их в яндексе или в гугле, как это делает Виталий, автор блога mojwp — утконос в топ google. Хоть ради конкурса, но есть чему поучиться.
Предлагаю отвлечься на видео из индийского фильма, которое поражает спецэффектами 😀
Читайте также: