Использование вспомогательных изображений с низким разрешением

 

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

 

 

 

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

1.Прежде всего создайте копию изображения с низким разрешением. Для этого откройте исходный файл в графическом редакторе, например в Adobe Photoshop. Сохраните изображение в формате, поддерживаемом обозревателями Интернет, например: MyImage.jpg.

2. Теперь, насколько возможно, сократим размер графического файла. Для этого уменьшим разрешение до 72 dpi, пропорционально уменьшим линейные размеры изображения и выполним индексирование цветов. Все эти операции уже выполнялись ранее в этой главе, в разделе «Выбор размера изображения». Результат сохраните в файле с новым именем, например: MyImage_lowres.gif.

3. Добавьте изображение на Web-страницу с помощью дескриптора

 

<IMG src='Mylmage.jpg' lowsrc='Mylmage_lowres.gif' width='100' height='75'>

 

Данный код HTML будет выполняться следующим образом. Сначала в окне обозревателя появится изображение с низким разрешением MyImage_lowres.gif.Одновременно в фоновом режиме будет продолжаться выгрузка большого файла MyImage.jpg.Как только выгрузка завершиться, изображение из файла Mylmage.jpgзаменит собой в окне обозревателя копию из файла Mylmage_lowres. gif.

 

 

 

Обязательно в коде дескриптора <IMG> следует установить с помощью атрибутов width и height размеры основного изображения. Если оставить эти атрибуты неустановленными, то обозреватель вычислит размер копии изображения с низким разрешением, после чего сожмет основное изображение до такого же размера.

 

 

Атрибут lowsrc поддерживается не всеми обозревателями. В таких обозревателях на экран сразу будет выводиться изображение, присвоенное атрибуту src.

 

 

Данный подход можно использовать для создания простых эффектов анимации. Атрибутам src и lowsrc можно назначить разные изображения с одинаковым разрешением, например: кошки и собаки или стоящего и идущего человека. Тогда в окне обозревателя сначала появится изображение из файла, присвоенного атрибуту lowsrc. Затем это изображение будет плавно заменено изображением из файла, присвоенного атрибуту src.

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

 

<А href='MyImage.jpg' title='Щелкните на этой миниатюре, чтобы посмотреть фотографию с высоким разрешением'><IMG src='Mylmage_lowres.gif' ></А>

 

 

 

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

 

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

 

 

Снабжайте графические гиперссылки подробными экранными подсказками с названием и кратким описанием открываемой фотографии. Назначайте текст подсказки атрибутуtitleгиперссылки.

 

Рис. 6.10. Пример фотоальбома с миниатюрными изображениями фотографий в качестве гиперссылок








Дата добавления: 2016-01-29; просмотров: 826;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.007 сек.