Интернет Университет информационных технологий  Расскажи
про свой ВУЗ!
www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Введение в JavaScript
(архив: ZIP)
1.   Назначение и применение JavaScri...
2.   Программируем свойства окна брау...
3.   Программируем формы
4.   Программируем графику
5.   Программируем гипертекстовые пер...
6.   Программируем "за кадром"
    Экзамен
    Сдать экзамен экстерном
    Литература

  Общение
однокурсники
форум по курсу
вопрос преподавателю
мнения о курсе

Введение в JavaScript
Лекция #4: Программируем графику
Страницы: « | 1 | 2 | 3 | 4 | вопросы | » | HTML для печати | PDF | ZIP
  Если Вы заметили ошибку на этой странице - сообщите нам.  

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

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

  • горизонтальные и вертикальные меню;
  • вложенные меню;
  • навигационные графические блоки.

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

<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">

Элементы переносятся на новую строку, так как ширина раздела меньше общей ширины всех картинок. Проблема решается, если применить защиту от парсера — <PRE>: (открыть)

<PRE>
<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">
</PRE>

Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту: (открыть)

<PRE>
<A HREF="javascript:void(0);"><IMG SRC="image1.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image2.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image3.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image4.gif"></A>
</PRE>

Этого можно достичь за счет применения атрибута BORDER равного 0: (открыть)

<PRE>
<A HREF="javascript:void(0);"><IMG SRC="image1.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image2.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image3.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image4.gif" BORDER="0"></A>
</PRE>

Теперь попробуем тем же способом реализовать многострочное меню: (открыть)

<PRE>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image4.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
</PRE>

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

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image14.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
</TABLE>

В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов.

Графика и обработка событий

В данном разделе мы не будем рассматривать обработчики событий контейнера IMG. Мы остановимся на наиболее типичном способе комбинирования обработчиков событий и изменения графических образов. Собственно, не имело бы смысла применять нарезанную графику, если бы не возможность использования обработчиков событий для изменения отдельных частей изображения. Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий, вызванных наведением мыши на объект, и изменением картинок:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>
<TR>
<TD><IMG SRC=image.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><IMG SRC=image1.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
</TR>
<TR>
<TD><IMG SRC=image2.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.manual.src='image3.gif';return true;" onMouseout="document.manual.src='image4.gif'; return true;"><IMG SRC=image5.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>
</TR>
<TR>
<TD><IMG SRC=image6.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.desk.src='image7.gif';return true;" onMouseout="document.desk.src='image8.gif';return true;"><IMG SRC=image9.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>
</TR>
</TABLE>

В данном примере при проходе курсор мышки через картинки меню последние изменяются. Этот эффект достигается за счет применения двух событий: onMouseover и onMouseout. По первому событию картинка меняется с позитива на негатив, по второму событию восстанавливается первоначальный вариант. Следует заметить, что события определены в контейнере якоря (A), а не в контейнере IMG. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.

Перейти к следующей странице »
  Если Вы заметили ошибку на этой странице - сообщите нам.  
Страницы: « | 1 | 2 | 3 | 4 | вопросы | » | HTML для печати | PDF | ZIP
  Спецпредложения
Для тех, кто желает поддержать проект:
Майки с символикой INTUIT.ru
Все книги+CD со скидкой более 60%
 
  Ключевые слова
Графика, IMG, загрузка картинок, отображение картинок, смена картинок события.
 
  Информация о лекции
В этой лекции рассказано о приемах программирования изменений графических образов на HTML-страницах. Подробно разбираются основные приемы программирования образов и приводятся примеры.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS.
все книги по курсу »