Уроки WEB дизайна




 Изображение на сайте


Ещё одно их сходство - это атрибут name.  Правда, назначение этого атрибута в данном случае несколько иное: использовать его в качестве "пункта назначения" ссылки не получится, а нужен он для разных программистских нужд, для манипулирования изображением. Правда, атрибут этот несколько устарел, т.к. изображению, как и любому другому элементу, может быть присвоено имя с помощью универсального атрибута id.
Атрибут border задает ширину рамки вокруг изображения. Атрибут, естественно, устаревший в пользу таблиц стилей, но тут есть одна тонкость: когда у нас в документе просто стоит изображение, его рамка по умолчанию равна нулю, и беспокоиться нам не о чем. Но вот если изображение является гиперссылкой…
…а это происходит довольно часто, то по умолчанию вокруг него появляется синяя рамка. Выглядит это обычно довольно несуразно. Соответственно, для изображений-ссылок, заключенных в элемент A, нам необходимо задать нулевую ширину рамки. Можно сделать это либо с помощью таблиц стилей, либо с помощью атрибута border, задав его значение равным нулю.
Теперь рассмотрим ещё один хитрый механизм. Как сделать изображение гиперссылкой, вы знаете, но можно, оказывается сделать гиперссылкой часть изображения, причём произвольной формы. И таких "частей" на одном изображении может быть несколько.
Таким образом мы можем обойти прямоугольность картинки и сделать ссылки какой-то необычной формы.
Делается это с помощью так называемых Image maps (карт изображений). Карты эти задаются отдельно от изображений с помощью специального элемента MAP. Элемент этот имеет обязательный атрибут name, по которому его сможет найти изображение. Закрывающий тег - обязателен.
Элемент MAP содержит элементы AREA, каждый из которых описывает одну из таких вот "чувствительных областей" изображения с помощью следующих атрибутов:
shape - форма области. Может быть многоугольником (poly), прямоугольником (rect) или окружностью (circle).
Coords - задает координаты области. Координаты эти, задаются в пикселях и, естественно, должны укладываться в размер изображения. Способ их задания зависит от формы области. Для прямоугольника это две пары координат: x и y верхнего левого угла и x и y правого нижнего угла.
В данном случае будет создана квадратная область размером 100х100 пикселей. Для окружности задаются координаты центра и радиус. В данном случае будет создана окружность радиусом 20 пикселей с центром в точке, отстоящей на 50 пикселей от верхнего края и на 50 - от левого.
Ну а для многоугольника перечисляются через пробел координаты всех его точек. Следующий атрибут элемента AREA - href -  полностью аналогичен атрибуту href гиперссылки, то есть задаёт собственно ссылку.
Наконец, знакомый вам по изображениям атрибут alt позволяет задать alt-тексты не для всей картинки, а для каждой из таких областей.
Вероятно, у вас уже зашевелились волосы на голове от всех этих игреков, но, конечно, никто не заставляет вас корпеть с измерителем над картинкой. Существуют специальные программы, где вы размечаете все эти области с помощью специальных инструментов, а вам уже выдается готовый html-код.
И, наконец, как всю эту чудовищную конструкцию присобачить теперь к изображению? Изображению этому нужно задать атрибут usemap, значением которого будет имя карты, заданное через атрибут name элемента MAP. И имя это должно предваряться решеткой.
Вот и всё об элементе IMG, являющимся одним из основных инструментов веб-дизайнера. Осталось осветить ещё одну тему для продвинутых учеников. Вообще-то, изображения - это не единственный пример внешних данных, включаемых в html-документ. Таким же образом в наши странички могут встраиваться и другие виды информации, не являющейся гипертекстом. Например, звук, анимация, flash-ролики, целые программные модули и даже другие html-документы. До сих пор  с подобным встраиванием царит некий сумбур, нет единого механизма, хотя по сути с точки зрения встраивания нет такой уж большой разницы между картинкой, звуком или ещё чем-то. Главное, чтобы браузер мог получить этот файл, понять, что это за файл и что с ним делать.
Именно поэтому в последней версии HTML рекомендуется все подобные внешние файлы, в том числе и изображения, включать при помощи универсального элемента OBJECT. Этот элемент уже давно используется, например, для вставки flash-роликов, но использование его вместо элемента IMG пока что остается экзотикой.

Карта сайта Реклама
На нашем сайте Вы сможете найти любую информацию о программах 3D Max, Macromedia Flash MX, Corel Draw 12, Adobe Illustrator и многих других. Вы не найдете на данном сайте различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи и кейгены для этих программ. Для приобретения или скачивания программ воспользуйтесь ссылками на официальных сайтах производителей.
употребляемых в спортивной фармакологии Сайт мошенников покупали