Создание карты изображений.

ГРАФИЧЕСКОЕ ИЗОБРАЖЕНИЕ - ССЫЛКА.

Если вставить картинку между тэгами < A> < /A> то получится ссылка в виде картинки. В этом случае браузер обведет картинку рамкой, убрать которую можно указав значение атрибута border=" 0" тэга < IMG>.

Пример:
Картинка-ссылка с рамкой:
< a href=" www.microsoft.com" > < IMG src="../pics/office.gif" align=" absmiddle" > < /a> www.microsoft.com
www.microsoft.com
Картинка-ссылка без рамки:
< a href=" www.microsoft.com" > < IMG src="../pics/office.gif" border=" 0" align=" absmiddle" > < /a> www.microsoft.com
www.microsoft.com

СОЗДАНИЕ КАРТЫ ИЗОБРАЖЕНИЙ.

Карты изображений (image maps) очень удобны для создания различного рода графических меню. Попробуем создать простейшее изображение, содержащее карту.
Для этого нарисуем, например:

На этом изображении имеются три области: прямоугольник, круг и то что осталось, каждая из которых имеет свой цвет. Опишем карту путем задания координат этих областей:

Карта задается тэгами < map> < /map>, внутри которых тэгами < area> задаются чувствительные области карты.

Итак, для нашего случая:

< MAP NAME=" mymap" >
< area shape=" circ" coords=" 75, 105, 53" href=" circle.htm" >
< area shape=" rect" coords=" 164, 52, 273, 151" href=" rectange.htm" >
< area shape=" rect" coords=" 0, 0, 297, 224" nohref>
< /MAP>

Следует обратить внимание, что последним тэгом < AREA> мы описываем все изображение, как нечувствительное к щелчкам мыши. В случае перекрывающихся областей браузер использует первое встреченное им в карте описание. Следовательно, в нашем случае браузер исключит из нечувствительной области заданный вначале круг и прямоугольник.
Затем вставим с помощью тэга < img> карту изображения в документ.
< img src="../pics/map.gif" border=0 usemap=" #mymap" >

Вот что получилось:

Карту изображения можно задать в отдельном файле. В этом случае следует указать этот файл в параметре атрибута usemap.
Например, если карта изображения задана в файле imgmap.htm:
< img src="../pics/map.gif" border=0 usemap=" imgmap.htm#mymap" >

Для создания карт изображений лучше использовать специальные программы, например: GeoHTML 2.1

РИСУНОК В КАЧЕСТВЕ ФОНА.

Сделать фон страницы можно с помощью атрибута

background тэга < body>, например:
< body background=" bgr.gif" >

background — позволяет задать в качестве фона html-страницы картинку.

Допустим есть картинка logo.jpg, расположенная по адресу https://www.seoded.ru/images/logo.jpg. Для того, чтобы сделать её фоном html-страницы нужно записать так:

< BODY background=" https://www.seoded.ru/images/logo.jpg" > < /BODY>

Если html-страница и картинка logo.jpg находятся в одном каталоге (папке), то можно записать так:

< BODY background=" logo.jpg" > < /BODY>

Если logo.jpg находится в подкаталоге images каталога с html-страницей (т.е. в папке images, которая находится в каталоге с html-страницей), то можно записать так:

< BODY background=" images/logo.jpg" > < /BODY>

Обычно в качестве фона используют небольшой и простой рисунок, так называемую текстуру, который многократно выводится на экран, заполняя всё окно. Поскольку размер такого изображения небольшой, то создание фона происходит очень быстро.

ВСТАВКА ВИДЕО В ДОКУМЕНТ HTML.

С помощью тэга < IMG> можно вставить в документ видеофрагмент в формате *.avi*.

Например:
< img dynsrc="../pics/search.avi" start=" mousemove" controls>

Видеофайл можно вставить в документ с помощью обычной ссылки, например:
< a href="../pics/search.avi" > просмотр ролика< /a>
В этом случае при нажатии на ссылку браузер загрузит плагин для воспроизведения видео и запустит ролик.

ВСТАВКА ЗВУКА В ДОКУМЕНТ HTML.

Чтобы вставить звуковой файл в документ, применяются следующие тэги:
< bgsound> с атрибутами:

balance -управление стереобалансом. Допустимые значения от -10000 до 10000.

volume -управление громкостью звучания. Допустимые значения от -10000 до 0 (максимальная громкость).

loop -сколько раз проигрывать файл. Если loop-" infinite" или " -1", проигрывание будет выполняться бесконечно.

src -путь к файлу.

< embed> с атрибутами:

loop -повторять с начала (true - да, false - нет).

play_loop=" число" -если повторять с начала то сколько раз.

src -путь к *.mid*, *.wav* или *.avi* файлу.

autostart -проигрывать сразу после загрузки (true - да, false - нет).

hidden -спрятать пульт управления (true - да, false - нет).

width -ширина пульта управления.

height -высота пульта управления.

Вообще, < embed> предназначен для вставки объектов, используя технологию OLE, которая используется в Windows-системах. Так что в других ОС этот тэг работать не будет.

Можно пользоваться несколькими тэгами:
< embed src=" bgmusic.mid" autostart=" true" hidden=" true" loop=" 0" >
< bgsound src=" bgmusic.mid" loop=" infinite" >

web-палитра

наиболее часто используемые атрибуты тега BODY:

bgcolor — цвет фона html-страницы.

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

Например, если вам нужен html-документ с черным фоном, то нужно написать так:

< BODY bgcolor=" black" > < /BODY>

или так:

< BODY bgcolor=" #000000" > < /BODY>

Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами. Шестнадцетиричные (hex) значения этих цветов (при использовании шестнадцетиричных (hex) значений перед числом нужно ставить символ #). В hex-значении цвета используется модель RGB: первые две цифры задают яркость красной (Red), вторые две цифры — зеленой (Green), а последние две цифры — синей (Blue) составляющей цвета.

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

text — устанавливает цвет текста html-документа. Например, сделаем текст зеленым:

< BODY text=" #008000" > < /BODY>

Все безопасные» цвета из так называемой Web-палитры, которые одинаково отображаются всеми браузерами. В таблице «безопасных» цветов показан сам цвет, указаны его название и шестнадцатеричное значение. При использовании шестн. значения необходимо поставить перед числом #.