фильтров на картинку

08.03.2005

Синтаксис для применения фильтров на картинку:
<img src="logo.gif" style="filter: alpha(style=0, opacity=35)">
<img src="logo.gif" style="filter: alpha(style=1, opacity=256, finishOpacity=0)">
<img src="logo.gif" style="filter: alpha(style=2, opacity=256, finishOpacity=0)">
<img src="logo.gif" style="filter: blur(strenght=250, direction=135)">
<img src="logo.gif" style="filter: glow(color=blue)">
<img src="logo.gif" style="filter: dropShadow(offX=15, offY=10, color=olive, add=0)">
<img src="logo.gif" style="filter: flipH()">
<img src="logo.gif" style="filter: flipV()">
<img src="logo.gif" style="filter: chroma(color=black)">
<img src="logo.gif" style="filter: gray()">
<img src="logo.gif" style="filter: light()">
<img src="logo.gif" style="filter: mask(color=green)">
<img src="logo.gif" style="filter: shadow(color=red, direction=45)">
<img src="logo.gif" style="filter: invert()">
<img src="logo.gif" style="filter: xray()">


Чтоб использовать фильтр на таблицу используйте примерно следующий синтаксис:
<table border style="filter: chroma(color=green)">

Поэкспериментируйте со значениями... opacity не более 256, add=1 повторяет контур... direction- угол падения тени(360 с шагом в 15 град.)
Фильтры могут иметь огромное количество параметров. Например фильтр light может создавать эффект направленного светового источника любого цвета с различным размытием и затенением. Другие фильтры могут например постепенно проявлять одно изображение сквозь другое.

08.03.2005

IMG
(HTML 2.0) - Image
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тэга.



Параметры:
SRC - обязательный параметр. Указывает адрес (URL) файла с изображением.

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

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

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

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

LOWSRC - указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

USEMAP - применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты - "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.

ISMAP - определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный параметр является флагом и не требует присвоения значения.


Пример 1:

<IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.




Пример 2. Использование изображения в качестве гиперссылки:

<A HREF="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справа.




Пример 3. Использование ISMAP:

<A HREF="http://www.igf.ru/bin/imagemaps/map1">
<IMG SRC="map.gif" ISMAP></A>




Пример 4. Использование USEMAP:

<IMG src="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">





Примечания (особо важно):

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


Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.


ВСЕГДА сразу после <IMG ...> ставьте <BR>!!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <img ...><br>. Увижу что сделали иначе - лично пристрелю!


Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR.


Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.


Указывайте значения параметров HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.


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