Нарезка изображений

Нарезка картинок применяется довольно часто. Она позволяет достигать эффекта частичного изменения отображаемой картинки. Чаще всего он применяется при создании меню.

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

Графика и таблицы

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

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

• вложенные меню;

• навигационные графические блоки.

Горизонтальное меню

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

Пример 7.2. Откройте данный пример в новом окне и попробуйте уменьшить ширину окна, так чтобы она стала меньше общей ширины всех картинок. Вы увидите, что картинки начинают переноситься на новую строку, когда ширина раздела становится меньше общей ширины всех картинок:

<IMG SRC="horis1.gif"><IMG

SRC="horis2.gif"><IMG

SRC="horis3.gif"><IMG

SRC="horis4.gif">

Пример 7.5. Горизонтальное меню (картинки съезжают в узком окне) (html, txt)

Рис. 7.1.  Горизонтальное меню (картинки съезжают в узком окне)

Пример 7.3. Проблема решается применением "защиты" от переноса на следующую строчку - контейнера <PRE>:

<PRE>

<IMG SRC="horis1.gif"><IMG

SRC="horis2.gif"><IMG

SRC="horis3.gif"><IMG

SRC="horis4.gif">

</PRE>

Пример 7.6. Горизонтальное меню (картинки защищены от переноса) (html, txt)

Рис. 7.2.  Горизонтальное меню (картинки защищены от переноса)

Пример 7.4. Если мы хотим использовать эту последовательность картинок как меню, то нужно задать гипертекстовые ссылки, что приводит к появлению рамок вокруг изображений. Это происходит потому, что по умолчанию толщина границ у изображений, являющихся ссылками - ненулевая.

<PRE>

<A HREF="courses.htm"><IMG SRC="horis1.gif"></A><A

HREF="setting.htm"><IMG SRC="horis2.gif"></A><A

HREF="baskets.htm"><IMG SRC="horis3.gif"></A><A

HREF="thehelp.htm"><IMG SRC="horis4.gif"></A>

</PRE>

Пример 7.7. Горизонтальное меню (рамки вокруг картинок) (html, txt)

Рис. 7.3.  Горизонтальное меню (рамки вокруг картинок)

Пример 7.5. Устранить этот недостаток можно путем задания значения атрибутаBORDER=0 у изображений:

<PRE>

<A HREF="courses.htm"><IMG SRC="horis1.gif" BORDER=0></A><A

HREF="setting.htm"><IMG SRC="horis2.gif" BORDER=0></A><A

HREF="baskets.htm"><IMG SRC="horis3.gif" BORDER=0></A><A

HREF="thehelp.htm"><IMG SRC="horis4.gif" BORDER=0></A>

</PRE>

Пример 7.8. Горизонтальное меню (рамки более не видны) (html, txt)

Рис. 7.4.  Горизонтальное меню (рамки более не видны)