В мир информатики

HTML углубленно. О размерах картинок на web-сайтах

Размещение фотографий на web-странице вовсе не новинка для человека, знакомого с основами HTML. На многих сайтах можно найти целую страницу — фотоальбом. Напомним, как организуется вставка графики в web-документ:

<IMG SRC="URL" ALIGN="значение"

WIDTH="значение" HEIGHT="значение"

ALT="текст">

Но редко где можно увидеть страницу, всю заполненную фотографиями оригинального размера. Обычно выкладывают уменьшенные по размерам и разрешению (соответственно — меньшие по объему) копии фотографий. Если кто-то желает получше рассмотреть какую-то из них, то он щелчком по гиперссылке может загрузить большую копию. Здесь есть недостаток: фото обычно загружается в это же окно и при возвращении “на исходную позицию” тратится лишний трафик. Можно организовать загрузку файла с изображением в отдельное окно браузера. Для этого надо оформить гиперссылку с атрибутом TARGET="_blank".

Если файл, содержащий уменьшенную копию картинки, имеет имя picture1.jpg, а файл нормального размера — picture2.jpg, то html-код гиперссылки, упомянутой только что, будет иметь следующий вид:

<IMG SRC="picture1.jpg" WIDTH="128"

HEIGHT="96" ALT="Уменьшенная копия">

</A>

Результат обработки браузером такой гиперссылки на экране будет выглядеть так, как показано на рис. 1.

Предложенное решение может быть усовершенствовано. Например, можно сделать так, что новое окно браузера не будет содержать кнопок навигации, адресной строки, полос прокрутки, а его размер будет изначально заданным. Для решения этой задачи можно создать несложный сценарий (скрипт) на языке JavaScript.

Код сценария размещается обычно в разделе заголовка между тегами <HEAD>…</HEAD>. Интегрируется он при помощи тега <SCRIPT> с атрибутом LANGUAGE. Сам текст сценария не отображается в окне браузера, он исполняется подобно подпрограмме в случае определенного действия пользователя или интерпретируется браузером вместе с кодом разметки гипертекста.

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

function picture()

{

window.open (URL, "newWindow",

config= "width=ширина, height=высота,

toolBar=0, location=0, directories=0,

status=1, menuBar=0, scroolBars=0,

resizable=0");

}

</SCRIPT>

— где picture() — имя созданной функции JavaScript,
по которому будет проводиться ее вызов, URL — адрес места нахождения картинки большого размера, config — атрибут, определяющий конфигурацию создаваемого окна; в нем устанавливаются несколько параметров.

Рис. 1

Параметры width и height устанавливают ширину и высоту нового окна в пикселях; значения следует брать на 10–15 точек больше, чем размер картинки.

Параметры toolBar, location, directories, status, menuBar и scroolBars определяют, выводить (значение параметра — 1) или не выводить (0) соответственно панель инструментов, адресную строку, панель гиперссылок, строку состояния, панель меню и полосы прокрутки.

Параметр resizable разрешает (1) или запрещает (0) произвольное изменение размеров окна пользователем.

Для того чтобы активизировать созданный сценарий JavaScript, в теле HTML-документа необходимо разместить соответствующую гиперссылку, включающую ряд необходимых параметров:

<IMG SRC="picture1.JPG" WIDTH="128"

HEIGHT="96" ALT="Уменьшенная копия">

</A>

Результат работы сценария показан на рис. 2.

Рис. 2

Как говорится, почувствуйте разницу…

Литература

1. Хоумер А., Улмен К. Dynamic HTML: справочник. СПб.: Питер, 2000.

2. Кингсли-Хью Э., Кингсли-Хью К. JavaScript 1.5. СПб.: Питер, 2002.

В мир информатики

HTML углубленно. О размерах картинок на web-сайтах

М.. Д.. Дибиров