Навигационные карты. учебник html

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

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

<map>
<area shape="rect">
</map>

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

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

<area shape="rect" coords="x1,y1,x2,y2">

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

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

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

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

<map>
<area shape="rect" coords="25,36,114,98">
</map>

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

<map>
<area href="https://bloggood.ru" shape="rect" coords="25,36,114,98">
</map>

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

<map name="karta1">
<area href="https://bloggood.ru" shape="rect" coords="25,36,114,98">
</map>

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

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

<img src="kartinka.gif" usemap="#karta1">

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

Пример:

<html>
<head>
<title> Карта изображения в HTML (навигационные карты). Урок №11</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<img src="kartinka.gif" usemap="#karta1">
<map name="karta1">
<area href="https://bloggood.ru/" shape="rect" coords="25,36,114,98">
<area href=" https://bloggood.ru/avtor/" shape="rect" coords="153,11,219,127">
</map>
</body>
</html>

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

Создание графической карты ссылок

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

Совет

При наведении на область ссылки курсор мыши изменяет свою форму, как и
при использовании обычных ссылок. При щелчке мыши на этой области ее
границы становятся видимыми.
Графическая карта создается с помощью нескольких тегов.
Первым является тег <map> с атрибутом name для указания
имени карты. Имя карты выбирается как имя переменной. В контейнере
внешних тегов <map> и </map> содержатся
теги <area> (область) для задания областей ссылок.
Тег <area> имеет атрибуты, определяющие ссылку, форму и
положение области ссылки.

href — строка, определяющая адрес ссылки
shape — определяет форму области; возможны значения
- rect — прямоугольник
- polygone — мноугольник
- circle — круг
coords — координаты области, которые задаются в виде перечня чисел,
разделенных запятыми. Весь перечень заключается в кавычки (для прямоугольника
задаются четыре числа — координаты верхнего левого и правого нижнего
угла; для мноугольника — задаются координаты каждого угла; для круга
задаются три числа — координаты цента и радиус).

После закрывающего тега следует указать тег,
вставляющий графическое изображение и реализующий привязку карты к нему —
тег <img>,подробно описанный в документе
«добавление изображений»

Кроме атрибутов, описанных раннее в этом случае в теге
<img> добавляется атрибут связи с картой:

usemap=»имя_карты»

В качестве имени карты указывается аргумент атрибута name
тега </map> Рассмотрим пример:

Перед вами усеченный вариант карты ссылок этого сайта. Попробуйте подвести
курсор мыши к прямоугольной или круглой области и вы увидете «всплывающее»
название страницы. Щелкнув мышкой по любому из выбранных объектов вы
можете перейти на интересующую вас страницу. В HTML-код это записано так:

 <P align=center><IMG height=337 alt="карта сайта" 
src="images/map.jpg" width=693
useMap="#sitemap" border=0><MAP name=sitemap>
 <AREA shape=RECT
  alt="Изучение HTML" coords="234,16,420,86"
  href="http://www.html-exp.narod.ru/content.htm">
  <AREA shape=RECT  alt="Основы HTML" coords="19,166,190,279"
  href="http://www.html-exp.narod.ru./base.htm">
  <AREA shape=CIRCLE 
  alt="Каскадные таблицы стилей" coords="320,240,60" 
  href="http://www.html-exp.narod.ru./css.htm">
  <AREA shape=RECT alt="Полезные советы" 
  coords="414,160,616,272" href="http://www.html-exp.narod.ru./advice.htm">
  </MAP>
 </P>

Здесь атрибут src тега img определяет графический элемент «map.jpg».
Атрибут usemap ссылается на элемент карты как на Web-адрес, следовательно
указывается символ #. В качестве атрибута границы border указан «0».
В теге map указывается какие области графического элемента (карты)
«работают» как гиперссылки. Атрибут name соответствует атрибуту usemap
тега img и «работает» как атрибут name в теге якоря <a>.

Совет

Желательно, чтобы все элементы карты находились в том же файле, что и
гоафический элемент, определяемый в теге img.

Теги area используется для определения областей на карте графических
ссылок, которые будут связаны с Web-адрессами. Атрибуты shape определяют
типы областей, в данном случае «rect» и «circle». В этом же теге area
определяются координаты объектов (различные для каждого типа объекта)
с помощью атрибута coords.

Примечание

Если две или более областей на карте перекрывают друг друга, то
преимущество имеет та область, описание которой появилось в
HTML-документе раньше (т.е. пользователю будет предоставлена
возможность использовать описание и ссылку первой появившейся
в документе области.

В некоторых случаях удобно созавать перекрывающиеся области,
делая одну из них неактивной исползуя атрибут nohref, например:

      <area shape="circle" coords="320,240,30" nohref>
      <area shape="circle" coords="320,240,60" 
         href="css.htm" alt="Каскадные таблицы стилей">

В этом случае первая окружность создает неактивную область,
находящуюся в пределах большой окружности — созданной вторым тегом area.
Чтобы получить ожидаемый эффект, необходимо, чтобы неактивная область
была описана первой (иначе она будет скрыта активной формой).
Посмотрим, что получится?

Возврат на главную страницу сайтаХостинг от uCoz

Карты изображений

Для задания конфигурации карты-изображения используется парный тег
<map> … </map>. Он имеет единственный
атрибут name, являющееся именем карты, которое указывается в атрибуте
usemap тега рисунка, являющегося ее основой:

Внутри тега <map> задаются непосредственно
области карты-изображения, которые задаются при помощи тега <area>.
Тег <area> имеет следующие атрибуты:
shape, coords,
href, nonhref,
target и alt.
Допустимыми значениями атрибута shape являются: rect,
circle, poly,
default. По умолчанию устанавливается значение
rect, задающий область в виде прямоугольника.

Значением атрибута coords являются координаты
области, которые задаются в виде списка. Для прямоугольника (rect)
задаются координаты левого верхнего и правого нижнего углов:

Для круга (circle) – координата центра и
радиус:

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

cords=»355,75,400,99,450,130,363,295,356,313,348,348,181,291,189,
281,260,291,305,290,316,248,317,224,318,197″ href=»fromimagemap3.htm»
alt=»На Документ 3″>

Назначение атрибутов href, target и alt такое же, как и в случае тега
<a>.

Ниже приведен пример создания карты изображения:

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

<
предыдущая

оглавление

следующая
>

Creating an image map: The map tag

The other half of the image map is the map definition itself. In this definition, you tell the browser where the hot spots are in the image, and what the hot spots need to link to.

The map is defined using the tag. In our example above, the tag looks like this:

You can see that we’ve defined 3 “hot spot” areas in the image map — a circle, a rectangle, and a polygon — and that we’ve linked each of these areas to a JavaScript function to display the appropriate shape name.

The above element is placed after the image in our HTML file. In fact, it can be placed anywhere within the HTML page body.

The general syntax for the element is:

So, each image map is given a name (), and one or more tags to specify the hot spots in the image.

The tag has the following attributes:

Specifies the shape of the area. Possible values are:

(a rectangular shape),
(a circular shape),
(an arbitrary polygon, with 3 or more points), or
(which represents the remaining area of the image not defined by any tags).

Specifies the coordinates that define the corners of the shape. The coordinates depend on the shape specified in the attribute:

Shape	Coordinates
	(The top left and bottom right corners of the rectangle)
	(The centre and radius of the circle)
	(The corners of the polygon)

Note that all coordinate values are relative to the top left corner of the image. In other words, the top left corner always has coordinates .

Note also that the shape type does not need any coordinates.

This is the URL that you’d like to link the hot spot to. It works just like a standard tag.

This is the optional target window or frame to open the linked URL in. Again, it works just like the attribute in a standard tag.

This attribute allows you to give the area a title. When the mouse is rolled over this hot spot, the browser will usually pop up a tool tip displaying this title.

HTML Tag

The HTML <map> tag is used to establish an image map which is essentially an image with some areas that are clickable. In this type of dynamic content, the name attribute of this <map> element is directly associated with the image’s usemap attribute, and in doing so, a relationship is created between the map and the image. As such, the HTML <map> element consists of various <area> elements which identify locations in the image map that can be clicked upon.

– Syntax

Attributes

The HTML <map> tag is compatible with all global attributes and event attributes.

Furthermore, there is a single attribute which is specific to this tag. Known as the <name> attribute, it is tabulated below.

ATTRIBUTE	VALUE	DESCRIPTION
name	mapname	This attribute is required and specifies the image map’s name for referencing purposes. During usage, this attribute must be included and cannot have an empty value without any spaces in the characters. Moreover, the value of the name attribute must be unique from the name attribute of any other <map> element in the same document. In case the <id> attribute is specified, these attributes must have identical values.

Полезные советы:

Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.
При создании страницы с навигационной картой тег <img> всегда должен быть выше самой карты <map> То есть писать вот так:

<map name=»panel»><area href=»primer1.html» shape=»rect» coords=»20,20,80,80″></map><img src=»knopki.jpg» usemap=»#panel»>

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

<img src=»knopki.jpg» usemap=»#panel»>В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
<map name=»panel»><area href=»primer1.html» shape=»rect» coords=»20,20,80,80″></map>А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..

Списки определений

Списки определений применяются для того, чтобы организовать текст по
примеру словарных статей. Они задаются с помощью тегов <dl>
… </dl> (definition list). Определяемый термин, или понятие,
помещается в теги <dt> … </dt>
(definition term). Определение понятия заключается в теги <dd>
… </dd> (definition description). В тексте, содержащемся
внутри тегов <dt> … </dt>, не могут использоваться теги
уровня блока, такие как <p> или <div>.
Как и в предыдущих случаях внутри списков определений могут использоваться
теги заголовков и прочие теги:

<dl>
<h3>Список определений</h3>
<dt>Понятие 1</dt>
<dd>Определение понятия 1</dd>
<dt>Понятие 2</dt>
<dd>Определение понятия 2</dd>
</dl>

«Не область»

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег <area> помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении «отверстия» в нашей карте.

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

Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега <map> указана первой

Следовательно, пример будет иметь такой вид:

<html><head><title>Навигационная карта</title></head><body><center><img src=»karta2.jpg» usemap=»#panel2″ width=»150″ height=»150″ border=»0″ alt=»Панель управления»></center><map name=»panel2″><area nohref shape=»circle» coords=»76,74,35″ title=»дырка»><area href=»primer5.html» shape=»rect» coords=»25,22,126,124″ title=»Дырявая кнопка»></map></body></html>
смотреть пример

Working out image map coordinates

If you’re using a Web page editor such as Macromedia’s Dreamweaver you can draw image maps straight onto your images and let the editor work out the coordinates, but what if you’re editing your page by hand?

One easy way to work out coordinates is to change your image map from client-side to server-side temporarily, by changing the attribute to , and adding a dummy tag around the image, e.g.:

Then, as you roll the mouse over the image, you should see the coordinates appear after the “?” in the status bar of your browser! Try moving your mouse over the image below to see if this works:

If you can’t get that working, another technique is to open your image in a graphics package such as Adobe Photoshop. You can then move the mouse over the image and see the mouse coordinates in the Info Palette.

You now know how to create image maps in HTML. Happy mapping!

HTML Теги изображения

Тег	Описание
<img>	Определяет изображение
<map>	Определяет карту изображений
<area>	Определяет кликабельную область внутри карты изображений
<picture>	Определяет контейнер для нескольких ресурсов изображений

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

Что такое карта изображений на веб-странице?
Для чего нужны карты изображений на HTML-странице?
Какой тег определяет карту изображений?
С помощью какого тега определяются кликабельные области на изображении?
Какой атрибут нужно добавить к изображению, чтобы установить взаимосвязь между изображением и картой изображений?
Какой тег определяет карту изображений на стороне клиента?
С помощью какого атрибута карта изображений связывается с изображением?
Какой тег определяет кликабельную область внутри карты изображений?
Какое значение определяет прямоугольную кликабельную область на изображении?
Какое значение определяет круговую кликабельную область на изображении?
Какое значение определяет полигональную кликабельную область на изображении?
Какое значение делает кликабельным всё изображение?
Какой атрибут используется для выполнения JavaScript-функции onclick при нажатии на кликабельную область изображения?
К какому элементу необходимо добавить событие click для выполнения JavaScript-функции onclick?

❮ Prev
Next ❯

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Клиентская карта-изображение</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <br>
	
	<!-- Привязываем к изображению карту map_3 (не забываем про знак решетки) -->
	<img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3">
	
	<map name="map_3">
		<!-- Указываем активные области карты -->
		<area href="page_1.html" shape="circle" coords="70,75,50">
		
		<!-- Эта ссылка откроется в новом окне -->
		<area href="page_2.html" target="_blank" shape="poly" 
		coords="130,125, 150,125, 140,25, 130,125">
		
		<area href="page_3.html" shape="rect" coords="170,125, 240,25">
	</map>
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания.
	</p>
</body>
</html>

Пример №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″.

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

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

Выравнивание картинки по центру HTML и CSS

Приветствуй вас на сайте Impuls-Web!

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

Навигация по статье:

Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.

Выравнивание картинки HTML

Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align:

<head>
<style>
.pic {
text-align: center; /* Выравнивания картинки по центру в html */
}
</style>
</head>
<body>
<p><img src=»images/img.jpg» alt=»pic»></p>
</body>
</html>

<head>

<style>

.pic {

text-align: center; /* Выравнивания картинки по центру в html */

}

</style>

</head>

<body>

</body>

</html>

Или же можно сделать еще проще и добавить в тег <img> атрибут style:

Выравнивание картинки по центру CCS

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

HTML:

CSS:

.center-pic{
display:block;
margin:auto;
}

.center-pic{

display:block;

margin:auto;

}

Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:

.conteiner img{
display:block;
margin:auto;
}

.conteiner img{

display:block;

margin:auto;

}

Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство

text-align:center.

HTML:

CSS:

.center-pic{
text-align:center;
}

.center-pic{

text-align:center;

}

С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием

text-align:center; или margin:auto, в зависимости от ситуации.

На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.

С уважением Юлия Гусарь

Доводим до ума..

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем «монтировать» её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title.

Избавимся от рамки бордюра.. сделаем border=»0″..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

В конце должно выглядеть примерно вот так:

<html><head><title>Навигационная карта</title></head><body><center><img src=»karta.jpg» usemap=»#panel» width=»300″ height=»100″ border=»0″ alt=»Панель управления» title=»Панель управления»></center><map name=»panel»><area href=»primer1.html» shape=»rect» coords=»15,15,82,82″ alt=»Зелёная кнопка» title=»Зелёная кнопка»><area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″ alt=»Жёлтая кнопка» title=»Жёлтая кнопка»><area href=»primer3.html» shape=»circle»coords=»250,50,33″ alt=»Красная кнопка» title=»Красная кнопка»></map></body></html>
смотреть пример

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

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

<map name=»panel»><area href=»primer1.html» shape=»rect» coords=»15,15,82,82″></map>

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

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

<html><head><title>Навигационная карта</title></head><body><center><img src=»karta.jpg» usemap=»#panel»></center><map name=»panel»><area href=»primer1.html» shape=»rect» coords=»15,15,82,82″></map></body></html>
смотреть пример

Немного поспешил с примером толком не объяснив суть написанного.

Заострим внимание на атрибутах тега

href=»primer1.html» — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на «зелёную кнопку».

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

А теперь самое интересное coords=»15,15,82,82″ — координаты.. Для прямоугольника они задаются двумя точками по принципу «Х1,У1,Х2,У2» Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape=»rect» для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения «рабочей» области всей кнопки.

Conclusion

After in-depth research, we have uncovered that the HTML <map> tag is used to designate specific areas in an image such that they can be clicked to activate specific Universal Resource Locators (URLs). The allotted HTML map area is also known as a hotspot and can have unique hyperlinks. Here is a summary of what we have learned about the HTML <map> tag:

The HTML <map> tag is used to create on-page image maps.
The name attribute of the image map must be identical to the usemap attribute.
This HTML <map> tag is compatible with both global and event attributes.
The opening and closing tags are required when using the HTML <map> tag.
This tag is compatible with a wide variety of browsers on computer systems and smart mobile devices.
We can use Cascading Style Sheets (CSS) to style the HTML <map> tag and improve its appearance.
While formatting the HTML <map> tag using Cascading Style Sheets (CSS), we can adjust elements such as the background color.
The HTML <map> tag is compatible with a wide variety of browser technologies.

using the HTML <map> tagcreate image maps

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

Создание графической карты ссылок

Карты изображений

Creating an image map: The map tag

HTML Tag

– Syntax

Attributes

Полезные советы:

Списки определений

«Не область»

Working out image map coordinates

HTML Теги изображения

Вопросы для самоконтроля

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

Выравнивание картинки по центру HTML и CSS

Навигация по статье:

Выравнивание картинки HTML

Выравнивание картинки по центру CCS

Доводим до ума..

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

Conclusion

Похожие записи:

Похожие записи: