Атрибут shape в HTML

Содержание

HTML shape attribute

shape

The purpose of the HTML shape attribute is to define the shape of an area element or a client-side image map.

Supported elements

HTML shape attribute supports area and a elements.

Syntax

Where ElementName is any supported element.

Type of value

Value

Value Description
default Defines the entire region.
rect Defines a rectangular region.
circle Defines a circular region.
poly Defines a polygonal region.

Default value

The default value of HTML shape attribute is rect.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML shape attribute with area element

Result

View this example in a separate browser window

Example of HTML shape attribute with a element

Result

View this example in a separate browser window

CSS Shapes

Прямоугольники внутри прямоугольников: это то, из чего состоят веб-страницы. Мы долго пытались вырваться из этих ограничений с помощью CSS для создания геометрических фигур, но форма этих фигур никогда не влияла на форму укладки контента внутри элемента, или на то, как элемент соотносится с другими элементами страницы.

Новая спецификация CSS Shapes меняет такое положение вещей. Представленная в середине 2012 года компанией Adobe , она имеет своей целью предоставить веб-дизайнерам новые возможности размещения контента, который теперь может обтекать сложные геометрические фигуры, как изнутри, так и снаружи — чего мы раньше не могли сделать даже с помощью JavaScript .

Например, обратите внимание, как текст обтекает круглое изображение в этом макете. Без Shapes , текст был бы просто прямоугольным блоком — возможность взаимодействия со сложными фигурами действительно открывает перед дизайнерами новые горизонты:

Давайте рассмотрим, как работает Shapes , и как вы можете начать его использовать.

Поддержка браузерами

В настоящее время CSS Shapes поддерживается только в Webkit Nightly и Chrome Canary , но его Модульный уровень 1 получил статус « рекомендовано к рассмотрению », то есть свойства и синтаксис, определенные в спецификации, вполне стабильны.

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

В частности, здесь определено свойство shape-outside и связанные с ним другие свойства. В сочетании с другими новейшими функциями, такими как Обрезка и наложение , CSS-фильтры , и Компоновка и взаимодействие , CSS Shapes позволят нам создать более сложные конструкции, не прибегая при этом к помощи графических редакторов, таких как Photoshop или InDesign .

Последующие уровни CSS Shapes будут описывать заключение контента внутри фигур. Например, на сегодняшний день в CSS довольно просто создать фигуру ромба: просто повернуть элемент на 45 градусов, а затем повернуть содержимое внутри него в обратную сторону, чтобы текст располагался горизонтально.

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

Когда же будут реализованы свойства CSS Shapes shape-inside , мы сможем сделать блок самого контента также ромбическим, и такие макеты, как тот, что приведен ниже, станут вполне возможны:

Сегодня для того чтобы использовать CSS Shapes в Chrome Canary , вы должны с помощью специальной опции разрешить использование экспериментальных функций. Если вы не уверены, как это делается, посмотрите эту пошаговую инструкцию в блоге Adobe .

Создание CSS Shape

Вы можете применить форму к элементу с помощью одного из свойств Shapes. Вы передаете свойство фигуры в функцию Shapes в качестве значения. Функция фигуры, это то куда вы передаете аргументы, определяющие фигуру, которую вы хотите применить к элементу:

Фигуры могут быть созданы с помощью одной из следующих функций:

Каждая фигура определяется набором точек. Некоторые функции принимают точки в качестве параметров; другие принимают смещения — но все они в конечном итоге рисуют фигуры в виде набора точек. Мы рассмотрим параметры для каждой из этих функций в приведенных ниже примерах.

Фигура также может быть определена путем ее извлечения из изображения с помощью альфа-канала. Когда изображение передается в свойства фигуры, браузер извлекает фигуру из картинки, используя shape-image-threshold . Форма определяется пикселями, чьи альфа-значения больше, чем пороговое значение.

Изображение должно быть совместимо с CORS . Если предоставляемое изображение по какой-либо причине не может быть отображено (например, если оно не существует), то не будет применяться ни одна из фигур.

Список свойств фигуры, которые принимают указанные выше функции в качестве значений:

  • shape-outside : укладывает контент вокруг (вне) фигуры;
  • shape-inside : укладывает контент внутри фигуры.

Вы можете использовать свойство shape-outside в сочетании со свойством shape-margin, чтобы добавить отступ от краев фигуры, этот отступ отодвинет текстовый контент от границ фигуры, создавая между ними свободное пространство. Аналогично сочетание свойств shape-inside и shape-padding отодвигает контент от границ фигуры изнутри, создавая внутренний отступ.

С помощью свойств и функций фигур, объявить фигуру, применяемую к элементу, можно одной строкой CSS -кода:

Даже если вы примените этот CSS -код к элементу, форма не будет применена, если не будут выполнены два условия:

  • Элемент должен быть плавающим. Будущие уровни CSS Shapes предоставят нам возможность определять фигуры и для не плавающих элементов, однако пока мы не можем сделать это;
  • Элемент должен иметь внутренние размеры. Высота и ширина, установленные в элементе, будут использоваться для создания системы координат этого элемента.

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

Илон Маск рекомендует:  Что такое код ncurses_mousemask

Установка таких внутренних размеров элемента, однако, не означает, что это повлияет на его адаптивность (мы поговорим об этом чуть позже).

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

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

Исходный бокс Shapes

C SS Shapes определяется и создается внутри исходного бокса ( reference box ), который используется, чтобы нарисовать фигуру в элементе. Кроме высоты и ширины элемента, бокс содержит: бокс границы, бокс смещения, бокс отступа, бокс контента, — они также используются в качестве основы для определения характеристик фигуры элемента.

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

Ключевое слово padding-box в приведенном выше коде указывает, что форма применяется, и она ограничивается боксом заполнения (областью заполнения) элемента. Функция circle() определяет фигуру круга, его размер и положение в элементе.

Определение Shapes с помощью функции фигуры

Мы начнем с укладки некоторой информации вокруг круглой картинки-аватара пользователя, вы могли бы использовать это для отображения профиля пользователя или вывода краткой справки о нем:

Мы будем использовать функцию circle() , чтобы применить фигуру круга с изображением пользователя, используя следующий код:

Вы можете спросить: « Почему бы не использовать border-radius для круглого изображения? » Ответ таков — свойство border-radius не влияет на обтекание контентом внутри или вокруг элемента, к которому применяется — оно не влияет на область контента внутри элемента или обтекание областью контента вокруг элемента. Оно влияет только на границы элемента и фоны.

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

Мы используем свойство border-radius , чтобы сделать изображение круглым, таким образом, мы обычно и придаем круглую форму изображениям или другим элементам страницы:

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

Для того чтобы изменить обтекание контента соответственно определенной фигуре, можно использовать свойства фигуры:

С помощью этого кода текст будет « видеть » круглую фигуру, примененную к изображению и укладываться вокруг него, как это было показано на первом скриншоте. (Сам результат вы можете увидеть здесь .) В браузерах, не поддерживающих Shapes , будет применяться код, который выводит контент так, как показано на втором скриншоте.

Вы можете использовать функцию circle() , как есть, или путем передачи в нее параметров. Ее официальный синтаксис следующий:

Знаки вопроса показывают, что эти параметры являются необязательными и могут быть опущены. Если вы опускаете один из параметров, его значение в браузере устанавливается по умолчанию. Если вы используете функцию circle() без указания расположения, то по умолчанию будет определяться круг, который расположен в центре элемента, к которому применена фигура.

Вы можете указать радиус окружности, используя любые единицы длины ( px , em , pt и т.д.) Вы также можете указать радиус, используя либо furthest-side , либо closest-side , но по умолчанию используется параметр closest-side , что означает, что браузер будет использовать расстояние от центра элемента до ближайшей к нему стороны, как длину радиуса. farthest-side использует расстояние от центра до самой дальней стороны элемента:

Функция ellipse() действует так же, как функция circle() , с теми же значениями, за исключением того, что вместо одного параметра радиуса, она принимает два: один для длины радиуса по оси х , второй — по оси у :

Функция inset() напрямую не связана ни с кругом, ни с эллипсом, она используется для создания прямоугольных фигур внутри элемента.

Но поскольку элементы уже имеют прямоугольную форму, и нам не нужно отдельно задавать прямоугольник, inset() может помочь нам создавать прямоугольники с закругленными углами, вокруг которых текст будет обтекать соответствующим образом:

Функция inset() принимает от одного до четырех значений смещения, которые определяют смещения внутри от краев исходного бокса. Они определяют, где прямоугольник будет размещен внутри элемента.

Функция также принимает необязательный параметр степени закругления углов вставляемого прямоугольника. Закругленные углы задаются точно так же, как border-radius , с использованием от одного до четырех значений, в сочетании с ключевым словом round :

Следующий код будет создавать прямоугольник с закругленными углами для плавающего элемента:

Реальный пример вы можете увидеть здесь .

И еще одна функция Shape — polygon() , она определяет более сложные произвольные фигуры, используя любое количество точек. Функция принимает набор пар координат, каждая из которых указывает положение одной точки. Множество точек в совокупности определяют фигуру.

В следующем примере, изображение расположено на странице справа, занимая всю высоту экрана. Мы хотим, чтобы текст обтекал песочные часы внутри изображения, поэтому мы используем функцию polygon() , чтобы задать неправильную фигуру внутри изображения:

CSS для приведенного выше изображения выглядит следующим образом:

Вы можете установить координаты точек, определяющих форму, в единицах длины или процентах, как в данном случае.

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

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

Для того чтобы визуализировать форму многоугольника, который мы создали, мы должны « обрезать » части изображения вне этой фигуры. В этом нам поможет свойство clip-path из CSS Masking Module .

Свойство clip-path принимает те же функции фигуры и значения, что и свойства фигуры. Если мы передадим в свойство clip-path ту же фигуру многоугольника, которую мы использовали в свойстве shape-outside , мы обрежем все части изображения, которые находятся вне определенной фигуры:

Результат будет следующим:

Свойство clip-path на сегодняшний день поддерживается с помощью префиксов, поэтому оно работает в Chrome через добавление к свойству префикса -webkit- . Реальный пример вы можете увидеть здесь .

Свойство clip-path прекрасно сочетается со свойствами фигур, так как оно помогает визуализировать созданные фигуры и обрезать все части элемента, которые находятся вне определенных форм. Поэтому вы, вероятно, найдете его полезным для себя и будете часто использовать его вместе со свойствами Shapes .

Функция polygon() также может принимать (необязательно) ключевые слова nonzero или evenodd . С их помощью указывается, как располагаются относительно друг друга области внутри фигуры многоугольника, которые имеют пересекающиеся сектора.

Больше об этом вы можете узнать в разделе свойства SVG fill-rule .

Определение фигуры с помощью изображения

Чтобы определить фигуру с помощью изображения, само изображение должно иметь альфа-канал, из которого браузер может извлечь фигуру.

Фигура определяется пикселями, чьи альфа-значения больше, чем определенное крайнее значение. Этот порог по умолчанию равен 0,0 (полностью прозрачный), или вы можете установить собственное значение с помощью свойства shape-image-threshold . Таким образом, любой непрозрачный пиксель будет использоваться как часть определенной формы из изображения.

Будущие уровни CSS Shapes смогут определять переходы, используя данные яркости изображения, вместо альфа-данных. Если это произойдет, shape-image-threshold сможет использовать или альфа-данные, или яркость, в зависимости от состояния переключателя.

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

С помощью свойства shape-outside со значением url() , указывающим на это изображение фотографии, мы можем задать обтекание контентом вокруг элемента в форме листа:

Конечно, если бы вы применяли к элементу фон, его нужно было бы обрезать вне определенной фигуры. Так как clip-path не принимает альфа-изображение в качестве значения, это можно сделать с помощью свойства mask-image (с соответствующими префиксами) из Masking Module . Результат выглядит следующим образом:

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

Вы также, вероятно, захотите использовать изображение вместо функции фигуры, когда у вас есть несколько обтекаемых или исключаемых областей внутри элемента — в данный момент мы не можем объявлять несколько фигур в элементе. Но если изображение содержит несколько областей, браузер сможет извлечь эти области из изображения и использовать их.

CSS Shapes в адаптивном дизайне

Может ли CSS Shapes использоваться в процессе разработки адаптивного дизайна? Текущая спецификация уже охватывает shape-outside , и так как мы можем указывать размеры элемента не только в различных единицах длины, но и в процентах, мы смело можем этим пользоваться.

Это означает, что элемент с заданной shape-outside будет полностью адаптивным, как и любой другой плавающий элемент с размерами, заданными в процентах.

shape-inside пока еще не является адаптивной, но это только потому, что данный вопрос специально реализуется в Модульном уровне 2 , многие из нынешних ограничений будут решены в следующем уровне.

Инструменты Shape

Создание сложных форм с помощью функций фигур может оказаться непростой задачей, особенно если вы при помощи функции polygon() создаете фигуру, состоящую из множества точек, каждая со своими координатами. К счастью, команда веб-платформы компании Adobe работает над развитием интерактивного инструментария, что сделает многие вещи гораздо проще.

Беар Трэвис создал коллекцию Shape Tools , которая позволяет визуально задавать многоугольные фигуры. Затем инструмент автоматически генерирует для нас функцию фигуры. Это довольно удобно, но данные инструменты имеют определенные ограничения.

Если вы хотите создать форму на основе определенного изображения, не существует никакого способа вставить изображение в инструмент, а затем создать для него фигуру.

Более продвинутый и гибкий инструмент Shapes был разработан командой Adobe Web Platform . Инструмент был недавно выпущен в качестве расширения для бесплатного редактора Brackets компании.

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

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

В правой части окна браузера осуществляется редактирование фигуры, а слева сразу интерактивно отображается код:

Этот инструмент станет для вас незаменимым, потому что он облегчает создание, редактирование и отладку фигур. Разван Калиман написал статью в блоге Brackets , из которой вы можете получить представление о том, как вам установить и начать использовать редактор Shapes в Brackets .

Будущее: CSS Exclusions

Спецификация CSS Shapes раньше использовалась и как спецификация CSS Shapes , и как Exclusions , но позже они были разделены.

В то время как CSS Shapes определяет свойства shape-inside и shape-outside , CSS Exclusions будет определять свойства, которые позволяют нам уложить контент вокруг элементов, которые не являются плавающими, например, элементов с заданным абсолютно расположением.

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

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

Подобные макеты с элементами определенной формы расположенными по центру статьи — с текстом, обтекающим их со всех сторон — также будут возможны.

Дальнейшее развитие Shapes

Текущая спецификация CSS Shapes — это лишь первый шаг. Вскоре новые опции предоставят нам больше контроля при создании фигур и укладке контента в и вокруг них. Что в свою очередь облегчит превращение макетов в интерактивные конструкции с помощью всего нескольких строк кода.

Сегодня редакторы спецификации ориентированы на работу с shape-outside , и еще до конца 2014 года мы, вероятно, увидим широкое применение CSS Shapes .

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

Вы также можете расширить тест Modernizr с помощью этого скрипта , чтобы проверить поддерживается ли shape-outside или скачать пользовательские сборки, включающие этот скрипт.

CSS Shapes еще больше приблизит веб-дизайн к полиграфии. Примеры, приведенные в этой статье, довольно просты, но они позволят вам создавать конструкции, настолько же сложные, как и в иллюстрированных журналах или на плакатах — все это вы сможете воссоздать на экране.

Что бы вас не заинтересовало — макеты неправильной формы или анимированные Shapes — пришло время попробовать их на практике и поэкспериментировать.

Данная публикация представляет собой перевод статьи « CSS Shapes 101 » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Илон Маск рекомендует:  Строение исходного кода

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

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

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега (я думаю Вам не стоит напоминать о том что тег имеет обязательный атрибут src который указывает путь к той или иной картинке )

Назовём наш рисунок/карту именем panel . Это будет выглядеть так:

Не забываем по правилам синтаксиса поставить знак #решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

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

href — указывает путь к открываемому документу (точно так же как в теге )
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

  • rect — прямоугольная область
  • poly — область представляет собой некий многоугольник
  • circle — область заданная окружностью

coords — координаты формы

Прямоугольная область

Теперь наша карта приобретает такой вид:

По сути теперь «зелёная» квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

The Shapes of CSS

Easily manage projects with monday.com

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element.

Атрибут shape в HTML

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Открывающий тег обязателен, закрывающего быть не должно.

Категории содержимого Элементы потока, фразового контента.
Разрешенное содержимое Нет, это пустой элемент.
Пропуск тегов
Допустимые родительские элементы
Разрешенные роли ARIA Нет
DOM интерфейс HTMLAreaElement

Атрибуты

Этот элемент включает в себя только глобальные атрибуты.

accesskey HTML 4 только, Вышла из употребления с версии Gecko 5.0 Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5. alt С помощью этого атрибута задается альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку («»). В HTML5 этот атрибут обязателен только при наличии атрибута href. coords Задает значения координат для активной области. Значение и количество значений зависят от значения укзанного для атрибута shape. Для rect или прямоугольника задаются две пары значений x,y coords: лево, верх, право и низ. Для circle , значения x,y,r где x,y координаты центра круга, а r радиус. Для poly или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: x1,y1,x2,y2,x3,y3, и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях. download HTML5 Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.»> для полного описания атрибута download . href Ссылка для активной области. Это значение действующего URL. В HTML4, этот или nohref атрибут обязательный. В HTML5, данный атрибут можно пропустить при условии, что активная область не является ссылкой. hreflang HTML5 Указывает язык связанного ресурса. Допустимые значения определяются BCP47. Используйте данный атрибут при наналичии атрибута href. name HTML 4 only, Вышла из употребления с версии Gecko 5.0 Определяет имя интерактивной области, чтобы оно могло прописатся в старых браузерах. media HTML5 A hint of the media for which the linked resource was designed, for example print and screen . If omitted, it defaults to all . Use this attribute only if the href attribute is present. nohref HTML 4 only, Вышла из употребления с версии Gecko 5.0 Indicates that no hyperlink exists for the associated area. Either this attribute or the href attribute must be present in the element.

Usage note: This attribute is obsolete in HTML5, instead omitting the href attribute is sufficient.

Пример

Результат

Notes

Under the HTML 3.2, 4.0, and 5 specifications, the closing tag is forbidden.

The XHTML 1.0 specification requires a trailing slash: .

The id, class, and style attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.

Netscape 1–level browsers do not understand the target attribute as it relates to frames.

HTML 3.2 defines only alt, coords, href, nohref, and shape.

HTML 5.1 defines obsolete the attribute type on this tag.

SHAPE Attribute | shape

HTML (DHTML)

SHAPE Attribute | shape Property

Sets or retrieves the shape of the object .

This property now applies to the a object.

HTML ELEMENT SHAPE = sShape . >
Scripting object . shape [ = sShape ]
sShape String that specifies or receives one of the following values.
circ Circle
circle Circle
poly Polygon
polygon Polygon
rect Rectangle
rectangle Rectangle

The property is read/write. The property has no default value.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

This example provides the full code for an image map of the solar system. When you click on the sun or any planet, you will link to the image associated with the x,y coordinate. You can click the Back button from the image to return to the solar system image map.

Карта изображения в HTML (навигационные карты). Урок №11

2014-02-04 / Вр:20:27 / просмотров: 18029

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

Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

Карты изображения (навигационные карты) задаются тегом .
Тег — это коробка, внутри которой размещают теги .
Тег предназначен для определения геометрической области с ссылкой, привязанной к каждой области.

Атрибуты areа

1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником).
Прямоугольник — » rect «. Пример: shape=» rect » ;
круг — » circle «. Пример: shape=» circle » ;
многоугольник — » poly «. Пример: shape=» poly «

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

Прямоугольная область

Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».

Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

Порядок записи координат для атрибута coords будет таким:

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

Для примера с прямоугольником №1 возьмите такие координаты:

x1=25, y1=36, x2=114, y2=98

Вот так будет выглядеть код:

Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.

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

Теперь свяжем карту с картинкой. Для этого используем атрибут usemap .
Пример написания:
usemap=» #имя_карты «

В нашем случае это будет выглядеть следующим образом:

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).

Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2

Круглая область

Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение « circle ».

Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:

Для круга №1 возьмите такие координаты:

x=46, y=48; а длина радиуса — R=35

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.

Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:

Многоугольная область

Многоугольная область самая сложная область в навигационной карте.

Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение « poly »

Теперь переходим к координатам.

Порядок записи координат для атрибута coords будет таким:

Разъяснение:
x1 , y1 координаты первого угла;
x2 , y2 координаты второго угла;
xN , yN координаты последнего угла

То есть, для многоугольника №2 это выглядит вот так:

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

Глава 6

Линейки, изображения, внедренные объекты

Ранее были рассмотрены возможности HTML, которые в сумме позволяют создавать практически полноценные гипертекстовые документы. Однако если пользоваться только ранее полученными знаниями языка HTML, то у создаваемых документов будет как минимум один существенный недостаток – наличие только текстового содержимого, никаких рисунков или других графических элементов. В данной главе вы познакомитесь с тем, как можно разнообразить содержимое HTML?документов при помощи различных нетекстовых элементов.

6.1. Линейки

Линейка – горизонтальная линия в окне браузера. Для вставки линейки в HTML?документ используется элемент HR. Этот HTML?элемент задается при помощи одиночного тега и имеет следующие атрибуты:

• align – задает выравнивание линейки в окне браузера, может принимать значения left, right или center;

• noshade – булев атрибут, указывает браузеру, что линейку следует отображать плоской (без традиционной тени);

• size – численное значение, определяющее толщину линии;

• width – численное значение, определяющее ширину линейки; может задаваться как абсолютное (в пикселах) значение, так и относительное (в процентах от ширины окна браузера).

По умолчанию используются выравнивание линейки по центру и ширина линейки, равная 100 % от ширины области окна браузера, отведенной HTML?документу.

Далее приведен небольшой пример, в котором иллюстрируется использование различных значений атрибутов для линеек (пример 6.1).

Пример 6.1. Использование горизонтальных линеек

Линейка с настройками по умолчанию

Линейки различной толщины

Линейки с различным выравниванием

Созданные в примере 6.1 линейки выглядят так, как показано на рис. 6.1.

Илон Маск рекомендует:  Работа с директориями (папками) в дельфи

Рис. 6.1. Использование горизонтальных линеек

6.2. Изображения

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

Для вставки изображения в текст HTML?документа используется элемент IMG. Для задания этого HTML?элемента используется одиночный тег . Список наиболее используемых атрибутов:

• scr – задает URI изображения;

• alt – альтернативный текст, который отображается на месте изображения, если по каким?либо причинам само изображение не может быть показано;

• border – задает толщину границы вокруг рисунка в пикселах;

• align – определяет выравнивание изображения (описание возможных значений приведено в табл. 6.1);

• height – задает высоту изображения в пикселах;

• width – определяет ширину изображения в пикселах;

• vspace – задает величину свободного пространства между изображением и текстом сверху и снизу;

• hspace – определяет величину свободного пространства между изображением и текстом справа и слева;

• name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии (поддерживается для совместимости с более ранними версиями HTML, для идентификации изображений лучше использовать атрибут id).

Среди перечисленных атрибутов элемента IMG обязательным является только атрибут scr. Значение атрибута alt задается тогда, когда нужно, чтобы пользователь, браузер которого не показывает изображения на странице (например, если отображение рисунков отключено в настройках браузера), хоть что?то увидел на том месте, где должно быть изображение. Атрибуты height и width используются для того, чтобы браузер еще до загрузки изображения мог правильно расположить его в тексте. Кроме того, эти атрибуты можно применять для принудительного изменения (сжатия или увеличения) размера изображения.

Приведенный ниже пример 6.2 иллюстрирует использование атрибутов alt, width, height, а также атрибута border.

Пример 6.2. Вставка изображений в HTML-документ

– небольшое изображение с рамкой.

– это изображение не может быть загружено браузером.

При обработке приведенного примера браузером получится документ, показанный на рис. 6.2 (предполагается, что браузер не может найти изображение image.gif).

Рис. 6.2. Вставка изображений

Атрибут align задает положение изображения в тексте. Он может принимать достаточно большое количество значений. Значения атрибута align и описание их воздействия на положения изображения приведены в табл. 6.1.

Таблица 6.1. Положения изображения в тексте

Действие различных значений атрибута align на положение изображения приведено на рис. 6.3.

Рис. 6.3. Различное выравнивание изображений

Для большей наглядности и экономии места изображения показаны несколько уменьшенными (height=20 и w >

Изображения-гиперссылки

Изображения, особенно небольшие пиктограммы и значки, часто используются в качестве графического представления гиперссылок. Создание изображения?гиперссылки выполняется очень просто: достаточно заключить HTML?элемент IMG внутрь элемента A, как показано ниже:

Изображение?гиперссылка обычно обводится браузером рамкой такого же цвета, что и цвет текста обычной гиперссылки в соответствующем состоянии (посещенная, непосещенная или активная).

Изображения-карты

Рассмотрим еще один интересный способ использования изображений для навигации – создание изображений?карт. Карта – это заданный набор областей различной формы. Заданные области карты считаются активными, и браузер работает с ними практически аналогично тому, как он работает с изображениями?гиперссылками. Так вот, изображение?карта – это обычное изображение с наложенной на него картой активных областей. Карту можно использовать не только с изображениями, но здесь будет рассмотрено использование карт именно с ними – так нагляднее.

Карта, используемая для изображения, может быть создана в любом документе, URI которого известен. Для создания карты используется элемент MAP (задается парными тегами и ). Обычно для элемента MAP задается значение атрибута name – имя, которое используется для ссылок на созданную карту.

• coords – координаты активной области (количество и значение зависят от типа области, заданного атрибутом shape);

• href – URI, на который указывает гиперссылка, ассоциированная с областью;

• nohref – булев атрибут, создает неактивную область (с областью ассоциируется пустая гиперссылка);

• shape – задает тип области, может принимать значения: rect (прямоугольник), circle (круглая область), poly (многоугольник) и default (по умолчанию используется вся область карты);

• alt – альтернативный текст;

• title – текст подсказки (отображается в виде всплывающей подсказки при наведении указателя мыши на область);

• tabindex – позиция элемента карты в порядке табуляции в HTML?документе (целое число от 0 до 32 767).

Задание набора значений атрибуту coords существенно отличается для областей различных видов. Значения задавать не нужно, если используется значение атрибута shape по умолчанию. Иначе при задании значений атрибуту coords нужно следовать следующим правилам.

• Если для атрибута shape установлено значение rect, то атрибуту coords задаются координаты верхнего левого и нижнего правого углов прямоугольника (например, coords=»10,10,34,45″).

• Если для атрибута shape установлено значение poly, то атрибуту coords задаются координаты всех вершин многоугольника. При этом лучше координаты первой вершины указать и в конце, а то вдруг разработчики браузера забыли создать автоматическое закрытие многоугольника (например, coords=»10,10,34,45,50,20,10,10″ – задание треугольной области).

• Если для атрибута shape установлено значение circle, то атрибуту coords задаются координаты центра и радиус окружности (например, coords=»100,100,45″). Радиус можно задавать в процентах, тогда значение радиуса в пикселах будет вычислено браузером на основе размеров объекта, на который накладывается карта, при отображении HTML?документа.

В примере 6.3 приводится один из способов использования изображения?карты для осуществления навигации по документам.

Пример 6.3. Использование изображения-карты

HTML :: Карты-изображения

Определение карты-изображения

Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента ‘a’. Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.

(от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

Атрибуты ismap и usemap

Карты-изображения применяются в двух вариантах: и , которые задаются, соответственно, атрибутами ismap и usemap элемента ‘img’ . Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента ‘map’ , перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.

Серверные карты-изображения

Серверные карты-изображения строятся следующим образом: создается элемент ‘a’ , атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки ‘a’ располагается элемент ‘img’ , у которого указывается атрибут ismap . При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET , т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

Пример №1. Формирование серверной карты-изображения

Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером

Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.

Клиентские карты-изображения, теги и

Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов ‘map’ и ‘area’ . Элемент ‘map’ формируется парным тегом (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name . Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента ‘img’ , выступающего в роли клиентской карты-изображения. Кроме того, элемент ‘map’ является контейнером для хранения элементов ‘area’ , каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент ‘area’ при помощи одиночного тега (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3).

Пример №3. Формирование клиентской карты-изображения

Поскольку элемент ‘area’ служит для создания гиперссылок, то он обладает всеми атрибутами элемента ‘a’ : href , target , download , rel , hreflang , type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt , shape и coords (от англ. coordinates).

Атрибут alt задает альтернативный текст для данной активной зоны изображения.

Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px . В качестве значений shape принимает:

  • «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″ ;
  • «default» – вся область изображения;
  • «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x , y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″ ;
  • «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x , y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″ .

Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом, как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос, зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних только координат.

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

Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1.

Как сделать карту ссылок изображений

Карта ссылок изображений представляет собой обычное изображение в html (тег ), но с областями-ссылками. Причем таких областей можно создать очень много практически любой формы.

Рассмотрим пример как выглядит карта изображений в html:

При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на » #green_link » (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на » #red_link «, а у синего круга соответственно на » #blue_link «.

Код этого примера:

Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения.

1. Необходимо создать связку изображения и карты . В изображении нужно сослаться на карту с помощью атрибута usemap=»#primer1″ . А ниже нужно описать код карты.

При создании карты ссылок атрибут usemap является обязательным для тега img.

2. Описание карты состоит из обязательного атрибута name , с помощью которого будет осуществляться привязка к изображению.

Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.

Атрибуты тега

1. Атрибут shape=»тип_объекта» — задает тип объекта. Может принимать следующие значения:

  • circle — круг;
  • rect — прямоугольник;
  • poly — многоугольник;

2. Атрибут coords=»значения_координат» — определяет геометрическое расположение объекта и его размеры.

Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

  • Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r — радиус круга;
  • Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 — координаты нижний правой точки прямоугольника;
  • Для типа poly: coords = (x1,y1,x2,y2. xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;
  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

5. Атрибут title=»подсказка» — выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

6. Атрибут nohref — делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

Обязательно область nohref должна идти первой.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL