Меню
Главная
Авторизация/Регистрация
 
Главная arrow Информатика arrow Разработка web сайта на основе HTML с использованием JavaScript

Как программировать картинки

Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.

Атрибут src = имя файла

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=./pic/img.gif>

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

<IMG src=monstr.jpg alt="Страшный зверь">

Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. Проверьте это на следующей картинке:

<IMG src=./pic07/cat7.gif alt="А нас и тут неплохо кормят!">

Атрибуты width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.

Если атрибуты не заданы, картинка рисуется в естественных размерах.

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

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

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.

При отсутствии атрибута, или при значении n=0 рамка не рисуется.

Ниже расположены ссылки на испытательные стенды. На них можно проверить работу атрибутов src, alt, width, height, border, как по отдельности, так и в совокупности.

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

align=top

вертикальное выравнивание по верхнему краю

align=middle

вертикальное выравнивание по центру

align=bottom

вертикальное выравнивание по нижнему краю

align=left

горизонтальное выравнивание по левому краю

align=right

горизонтальное выравнивание по правому краю

Давайте зададим небольшой текстовый абзац и разместим внутри него картинку:

<P>

Посмотрите на картинку.

<IMG src=./pic/4.jpg align=middle>

Красивая птичка!

</P>

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

Картинка как ссылка

Очень легко заставить работать картинку как гиперссылку. Достаточно вложить команду IMG внутрь команды A:

<A href=переход><IMG src=файл></A>

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

Для картинки с часами не задан атрибут border. Тем не менее, мы видим рамку. Эта рамка появляется потому, что картинка является гиперссылкой.

Часто рамка вокруг картинки нежелательна, даже когда она означает ссылку. Ведь о ссылке однозначно говорит изменение формы курсора, а если картинка -- прозрачный GIF -- рамка смотрится некрасиво. Избавиться от рамки, даже когда картинка -- ссылка, можно явным заданием border=0.

Эти ссылки заданы так:

<A href=05ex0401.htm><IMG src=./pic/auto.gif border=0

width=200 height=68

alt="Попробуй, догони!"></A>

<A href=05ex0401.htm><IMG src=./pic/auto.gif

width=200 height=68

alt="Эх, не догнать... Посадили в клетку!"></A>

 
< Предыдущая   СОДЕРЖАНИЕ   Следующая >
 

Предметы
Агропромышленность
Банковское дело
БЖД
Бухучет и аудит
География
Документоведение
Естествознание
Журналистика
Инвестирование
Информатика
История
Культурология
Литература
Логика
Логистика
Маркетинг
Математика, химия, физика
Медицина
Менеджмент
Недвижимость
Педагогика
Политология
Политэкономия
Право
Психология
Региональная экономика
Религиоведение
Риторика
Социология
Статистика
Страховое дело
Техника
Товароведение
Туризм
Философия
Финансы
Экология
Экономика
Этика и эстетика
Прочее