IMG - линейные изображенияДокументация по HTML , тэги HTML , примеры html , ячейка таблицы , фрэймы , шрифт , url , неподчеркнутые ссылки , оптимизировать графику взлом защита скачать бесплатно новые свежие архив секреты недокументированные способы русский перевод компьютер zip каталог add url forum форум чат chat программист программер хакер xakep hack баги компилить сорцы научиться урок обучение домашняя страница home page разработка создание применение примеры способы портал документ знания
Разработка сайтов, web дизайн - Центр Русского Дизайна HOD.RU
FLASH
3D Studio MAX
DreamWeawer FAQ
Изучение HTML
META тэги
CSS
Руководство по стилям
Спецификация WML (WAP)
Язык DHTML
Спецификация XML
Руководство по Java
Документация по JavaScript
Язык HOD Text Processor
Интерфейс CGI
Документация по Perl 5
Perl FAQ
Документация по PHP
PHP/FI 2.0
Документация по SQL
Базы данных
Доступ к БД

Рейтинг@Mail.ru Rambler's Top100

Веб дизайнеру
Каталог сайтов Axes.ru


IMG - линейные изображения

Цель

Для включения изображения в документ.

Типичное отображение

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

Позиционирование изображения обеспечивается атрибутами элемента IMG.

Основной синтаксис

<IMG SRC="URL" ALT="текст">

Возможные атрибуты

имя атрибутавозможные значениясмыслпримечания
SRCURLадрес изображенияобязателен; смотрите примечания по графическому формату
ALTстрокатекстовое описание изображения 
ALIGNTOP, MIDDLE, BOTTOM, LEFT, RIGHTпозиционирование изображения относительно текущей текстовой строкипо умолчанию BOTTOM
HEIGHTцелоевысота в пикселях единственное предложение
WIDTHцелоеширина в пикселях единственное предложение
BORDERцелоеширина бордюра (рамки) в пикселяхиспользуется, когда элемент IMG появляется, как текст якоря; используйте BORDER=0 для подавления рамки
HSPACEцелоеширина незаполненного пространства непосредственно слева и справа от изображения в пикселяхзначение по умолчанию - малое ненулевое число
VSPACEцелоевысота незаполненного пространства выше и ниже изображения в пикселяхзначение по умолчанию - малое ненулевое число
USEMAPURLфрагмент идентификатора для сайта клиента с картой образакарты определены элементом MAP; имена карт - чувствительны к регистру набора символов
ISMAPISMAPпоказывает, что изображение является картой образа, реагирующей на нажатие клавиши мышикогда пользователь "кликает" на изображении, этот атрибут обеспечивает передачу координат курсора серверу

Атрибутов HEIGHT, WIDTH, HSPACE, VSPACE, и USEMAP нет в HTML 2.0!

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

Значения ALIGN имеют следующий смысл:

ALIGN=TOP
Позиционирует верх изображения с верхом текущей текстовой строки. Броузеры по разному интерпретируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и игнорируют, что идет на строке после него.
ALIGN=MIDDLE
Выравнивает середину изображения по основной текстовой строке.
ALIGN=BOTTOM (по умолчанию)
Выравнивает низ изображения по основной строке.
ALIGN=LEFT
Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-нибудь текст или ранее появившееся изображение до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по левому краю изображения смещаться на новую строку, с последующим продолжением текста на прежней строке.
ALIGN=RIGHT
Перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения. Отображение зависит от того, были ли выровненные по правому краю какой-нибудь текст или ранее появившиеся изображения до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по правому краю изображения смещаться на новую строку с последующим продолжением текста на прежней строке.

Заметьте, что некоторые броузеры (например, Internet Explorer 2.0 и 3.0) вводят случайное расположение многочисленных лево- и правовыровненных образов. Смотрите BR о способах управления текстовым потоком.

Что касается ISMAP, приведем пример того, как можно его использовать:

<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>

Нажатые координаты передаются серверу. Броузер извлекает новый URL из URL, специфицированного атрибутом HREF, с добавлением знака вопроса (?), координаты x, запятой (,) и координаты y локализации (координаты выражены в пикселях). Связь следует с использованием уже нового URL. Например, если пользователь нажал на участок с x=10, y=27, формируемый URL будет: "/cgibin/navbar.map?10,27". В целом, это хорошая идея для подавления бордюра (использование атрибута BORDER=0) и обозначения того, что изображение реагирует на нажатие клавиши мыши.

Допустимый контекст

Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов HTML.

Содержимое

Никакое.

Примеры

Пример IMG-1.html:

<IMG SRC="Yucca.jpg" ALT="[Picture of Yucca]" WIDTH=110 HEIGHT=168>
<P>
<IMG SRC="Yucca.jpg" ALT="[Picture of Yucca]" WIDTH=110 HEIGHT=168 ALIGN=RIGHT>
This is a simple example of embedding images.
This paragraph should be displayed, in a graphical browser,
with an image at the right,
and before this paragraph the same image should appear
separately, with default alignment.
</P>

Используйте IMG с ISMAP, чтобы создать реагирующую на нажатие клавиши мыши карту:

Пример IMG-2.html:

<A HREF="http://www.hut.fi/cgi-bin/imagemap/Pictures/English/english.map">
<IMG HEIGHT="400" WIDTH="400"
SRC="http://www.hut.fi/Pictures/English/english.gif"
ALT="Helsinki University of Technology" ISMAP>
</A>

Примечания

Смотрите общее обсуждение изображений, формул и т.д., которое содержит дополнительные примеры.

Если Вы хотите, чтобы изображение появилось справа или слева от текстового абзаца, Вы должны расположить элемент IMG в начале абзаца (P элемент). Однако при этом результат может Вас не устроить. Поэтому хорошей практикой стало иметь элемент BR с атрибутом CLEAR в конце такого абзаца.

Семантика и использование атрибута ALT пока ясно не определены. Можно рассматривать как рекомендации, обеспечение текстовых вставок в содержимое изображения для текстовых и речевых броузеров. Однако лучше вставлять заголовки или надписи рядом с изображением. Иногда трудно сказать, как лучше дать пояснения к изображению в атрибуте ALT, так как синтаксис ограничен значениями, которые могут использоваться в коде разметки HTML. Более того, одни графические броузеры в ситуации, когда пользователь прекращает автоматическую загрузку изображения высвечивают значение ALT, другие - могут высветить только часть сгенерированного образа, которая мало что говорит. На эту тему A.Дж. Флавелл написал обширный документ Использование ALT текстов в IMG.



Содержание