Включение графики в web-страницу

 

Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:

<IMG src=”URL”

аlign=”значение”

border=”значение”

 

height=”значение”

alt=”текст”

hspace=”значение”

vspace=”значение”

ismap>

В качестве параметра атрибута src указывается путь к изображению в виде либо полного URL (например, http: // www. mys1te. ru/images/picture. jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например,. . /Images/picture. jpg).

С помощью атрибута align картинка позиционируется в документе HTML. Этот атрибут может принимать значения:

right – изображение выравнивается по правому краю,

left – изображение выравнивается по левому краю,

center – изображение выравнивается по центру,

texttop или top – изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка,

absbottom или bottom – изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки,

absmiddle или middle – центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки,

baseline – изображение выравнивается по условной "базовой линии". Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы.

Атрибут border управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение border равным нулю.

В качестве параметров атрибутов width и height указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.

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

Атрибуты hspace и vspace задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. hspace определяет величину незаполненного пространства справа и слева от картинки, vspace соответственно сверху и снизу.

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

Пример применения тега <IMG>:

<IMG src=”/images/sunset. ipg”

align=”CENTER”

ProductID="325”" w:st="on">325”

height=”215”

аlt=”Красивый закат на берегу Карибского моря”>

 

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

 

Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:

<А href=”URL документа, на который организуется ссылка”>

<IMG src=”URL изображения”

align=”значение”

width=”значение”

hеight=”значение”

alt=”альтернативный текст”

bоrder=”значение”>

</А>

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

<А href=”/hobbie/index. htm1”>

<IMG src=”/mages/hobbie. jpg”

align=”BASELINE”

ProductID="315”" w:st="on">315”

height=”226”

alt=”Тематический раздел 'Мои увлечения'”

border=”0”>

</A>

 

Карты ссылок

 

Карта ссылок (image map) представляет собой графическое изображение, разбитое на фрагменты, причем каждый фрагмент является одновременно гиперссылкой. Для задания карты ссылок необходимо:

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

2. Разбить изображение на отдельные фрагменты и составить их описание.

3. Описать каждый фрагмент.

Графические карты создаются с помощью тега <МАР>. Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:

<МАР name=”имя карты”>

<AREA href=”URL”

shаре=”параметр”

coords=”x1, y1, x2, y2”

аlt=”альтернативный текст”

target=”параметр”

nohref>

</МАР>

Атрибут name тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. При задании имени карты необходимо соблюдать регистр.

Тег <AREA> определяет непосредственно активную область изображения. Атрибут href указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения.

Атрибут alt определяет всплывающую подсказку при наведении курсора мыши на данный элемент.

Атрибут shape управляет формой активной области и может принимать одно из трех значений: rect – прямоугольник, circle – круг или poly – многоугольник.

Атрибут coords позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута:

 

Значение shape	Синтаксис записи coords	Значения параметров coords
shape=rect	coords=”xl,yl,x2,y2”	x1 и yl – координаты левого верхнего угла фигуры, x2 и y2 – правого нижнего
shape=circle	coords="x,y,r"	х и y – координаты центра окружности, r – ее радиус в пикселах
shape=poly	coords="x1,y1,x2,y2, x3,y3,... xn,yn,x1,y1"	x1, y1... xn, yn – координаты вершин многоугольника

 

Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. То есть, значение х возрастает справа налево, а значение у – сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: shape="rect" coords= "0,0,50%,50%". Если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA> первой, имеет приоритет.

Значения атрибута target такие же, как и у тега <A>.

Необязательный атрибут nohref определяет неактивные участки карты и исключает переходы при щелчке мышью по данному фрагменту.

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

 

HTML	CSS
DHTML	JavaScript

 

<IMG src=”map1. gif”

usemap=”#refer”>

<MAP name=”refer”>

<AREA shape=”rect”

coords=”0,0,169,29”

href=”html. html”>

<AREA shape=”rect”

coords=”170,0,339,29”

href=”css. html”>

<AREA shape=”rect”

coords=”0,30,169,59”

href=”dhtml. html”>

<AREA shape=”rect”

coords=”170,30,339,59”

href=”javascript. html”>

</MAP>

Пример 2. Пусть изображение состоит из многоугольников, а его полный размер составляет 370x120 пикселов. Координаты вершин многоугольников задаются последовательно, причем первая и последняя координаты должны совпадать, чтобы многоугольник был замкнутым.

 

 

<IMG src=”map2. gif”

usemap=”#polygons”>

<MAP name=”polygons”>

<AREA shape=”poly”

coords=”0,0,184,0,0,59,0,0”

href=”html. html”>

<AREA shape=”poly”

coords=”185,0,369,0,369,60,184,0”

href=”css. html”>

<AREA shape=”poly”

coords=”185,119,369,59,369,119,185,119”

href=”javascript. html”>

<AREA shape=”poly”

coords=”0,59,185,119,0,119,0,59”

href=”dhtml. html”>

<AREA shape=”poly”

coords=”185,0,369,59,185,119,0,59,185,0”

href=”web. html”>

</MAP>

Карты ссылок можно создавать и другим способом. Изображение можно рассечь на отдельные фрагменты и "склеить" его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы <А>. Данный прием применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера. Однако аккуратно "разрезать" изображение при помощи традиционных графических редакторов, причем так, чтобы готовая "мозаика" правильно вписывалась в таблицу, весьма трудно. Для решения этой задачи web-мастеру помогают специальные утилиты – фрагментаторы графики.