Аннотация

Методическая разработка предназначена  для учащихся совершенствующих свои знания в области создания динамических web-страниц средствами библиотеки JQuery. Рассматривается необходимое программное обеспечение, подготовка структуры и изображений, формирование HTML-документа. Прилагается электронный вариант разработки "Устройство системного блока".

Создание  интерактивного изображения
с помощью библиотеки JQuery

Ученое пособие предназначено для учащихся второго года обучения по общеобразовательной программе «От странички к Web-сайту», знакомых с языком HTML и CSS,  и является дополнительным материалом, иллюстрирующим использование современных технологий для создания динамических web-страниц.

Существует много различных способов создания интерактивных картинок. В данном пособии рассматривается способ применения библиотеки JQuery.

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

Программное обеспечение и исходные файлы

Для создания и просмотра интерактивного изображения необходимо:

1. Скачать из Интернета библиотеку JQuery (последнюю версию,  на момент создания пособия это JQuery 1.10.2).

http://jquery.com 

Данная библиотека сценариев представляет собой файл

jquary.js со скриптами.

2. Иметь браузер для просмотра работы страницы с интерактивным изображением.

Подготовка структуры и изображений

1. Создать конкретную структуру папок , в которых будут размещены необходимые документы.

2. Необходимые графические изображения:

«Главная картинка» – это та картинка, которая воспроизводится на странице при ее запуске в браузере.  Это может быть, например, семейная фотография, или карта страны, или, как в рассматриваемом в данном пособии примере, компьютер, отдельные устройства которого можно представить с помощью дополнительных «меток» (в нашем примере -  ), «всплывающих подсказок»  и «всплывающих картинок».

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

В нашем примере это «всплывающие картинки»  (или картинки с текстами) отдельных элементов системного блока.

      power.jpg                me

      и т.д.

Структура файла index.html

1. Подключаем библиотеку JQuery

Для этого в тэге … прописываем:

2. Создаем переменные:

3.  Прописываем стили

         -- >

Создаем интерактивную картинку с помощью библиотеки jQuery

4. Организуем структуру слоев в тэге …body>

Настройка размеров, координат размещения и цвета

Приложение

электронный вариант разработки "Устройство системного блока".

Используемые источники

1. http://learn.jquery.com/about-jquery/how-jquery-works/- Как работать с JQuery

2. http://jquerylist.ru/tutorials/how-jquery-works.html - учебник JQuery

3. http://webformyself.com/sozdaem-interaktivnuyu-kartinku-s-pomoshhyu-jquery/ 

4. http://lifeexample.ru/jquery-javascript-primeryi/biblioteka-jquery.html - описание библиотеки