Разделение рисунка на активизируемые сегменты.
В качестве инструмента реализации данной операции может быть выбран редактор Adobe Image Ready, инсталлируемый, как правило, вместе редактором Adobe Photoshop 8.0. Для помещения фрагментируемого объекта в окно редактора Adobe Image Ready достаточно скопировать его в буфер обмена из документа, в котором он был создан для помещения на HTML-страницу электронного учебника. Создавать новый документ Adobe Image Ready предпочтительно после помещения объекта в буфер обмена, т.к. в этом случае редактор по умолчанию предлагает по команде new из меню file открыть окно, размеры которого соответствуют размерам объекта
Разбивка элемента на сегменты осуществляется с помощью инструмента «Кусочек» (Slice). После сегментирования файл следует сохранить, выбирая в меню File > Save Optimized As.... В результате получается HTML-страница, содержащая таблицу, в ячейках которой находятся выделенные части рисунка. Все изображения хранятся в папке "image". Заходим в эту папку. Найдя необходимую рисунка, например, файл - formula-_05.gif, а в HTML-коде строку «formula-_05.gif», можно связать с этой частью рисунка гиперссылку, всплывающую подсказку или событие, происходящее при наведении на эту область курсора мыши.
Всплывающая подсказка
В теге рисунка (<img>) ставим еще один параметр: alt= «наш комментарий». Например, <img src="1.gif" alt="рисунок">
Гиперссылка
Окружаем тег рисунка тегом ссылки (<a> и </a>) например
<a href = "коментрий.htm"<img src="1.gif" alt="рисунок"></a>
Событие
Создаем в нашем документе форму с текстовым полем в любом месте, например, ниже формулы. Для этого в исходном коде после тега закрытия таблицы (</table>) и тега закрытия абзаца (</p>) вставим такой код:
|
<p> <form name=forma> <input name="comment" type="text" value="" size="300"> </form> </p> |
Новый абзац Открытие формы, определение ее названия Создание текстового поля определение его названия, длины и начальный текст Закрытие формы Конец абзаца |
В тег рисунка добавим такой фрагмент:
onmouseover="javascript:document.forma.coment.value=´Ускорение точки а´;"
Это фрагмент кода javascript, который при наведении курсора мыши на рисунок вписывает в текстовое поле определенную строку, обращаясь к ней как объекту.
Вместе получится:
<img border=0 onmouseover= ="javascript: document. forma. coment. value=´Ускорение точки а´;"
src="images/formula-_02.gif" width="134" height= ="182" alt="">
Можно также создать событие для покидания курсором площади рисунка, чтобы очистить текстовое поле.
Разумеется, предложенную технологию создания фрагментированных ФЭО имеет смысл использовать только тогда, когда исходные объекты не составляются изначально из фрагментов, каждый из которых может быть обработан в редакторе HTML-страниц.