Правильная ссылка на эту страницу
http://az-design.ru/Projects/WebStat/JS/01b020.shtml

Глава 2. Использование гиперсвязей n меток в JavaScript-программах

       Гиперсвязи — это краеугольный камень Web. Они позволяют переходить от одного документа к другому с помощью щелчка мыши. В языке HTML гиперсвязь создается посредством тега <a href=URL >...</а>, где URL — адрес Web-ресурса, к которому вы хотите обратиться при активизации этой связи. Заданный в атрибуте href целевой ресурс загружается в окно броузера Navigator. Можно указывать ресурсы различных типов — Gopher, News, FTP и др.
       Обратите внимание на то, что тегам языка HTML в языке JavaScript соответствуют объекты. При просмотре тега <а href> броузер Navigator воспринимает эту гиперсвязь как объект. Обращение к объектам происходит с помощью их свойств, например свойства link, которое описывается в данной главе.

Из этой главы вы узнаете:
       — Как создавать гиперсвязи и метки в HTML-документе
       — Как использовать язык JavaScript для создания гиперсвязей и меток, а также для ссылки на них
       — Как использовать адреса URL в JavaScript-программах для доступа к различным ресурсам Internet
       — Как назначать метки для фреймов во фреймсодержащем документе
       — Как использовать клиентские сенсорные изображения в языке JavaScript для улучшения навигации по гиперсвязям

Свойство links
       Программа на языке JavaScript может обращаться к созданным вами гиперсвязям и меткам, используя стандартные свойства этих объектов, а именно свойства links*{В броузере Microsoft Internet Explorer свойство links объекта document не поддерживается, и при обращении к нему появляется сообщение об ошибке.} и anchors. Кроме того, в языке JavaScript имеется ряд методов, с помощью которых можно управлять этими объектами, создавая гиперсвязи и метки динамически без помощи тегов языка HTML.
       Когда HTML-документ загружается в Navigator, теги <а href > просматриваются и их атрибуты href (адрес URL, на который ссылается гиперсвязь) помещаются в свойство links. Свойство links представляет собой массив, каждый элемент которого соответствует одной обнаруженной гиперсвязи.
       Полный синтаксис тега гиперсвязи <а href> имеет следующий вид:

<а href="MMHURL"
[onClick="JavaScriptCmds"]
[onMouseOver="JavaScriptCmds"]
[target="frameName"]>LinkText
</a>


       где имя URL (Uniform Resource Locator — универсальный указатель ресурса) представляет собой адрес ресурса в сети, который вы хотите загрузить в Navigator, например имя другого HTML-документа. Значениями атрибутов onclick и OnMouseOver являются процедуры-обработчики событий JavaScript. Они обрабатывают события, связанные соответственно со щелчком мыши на данной гиперсвязи и с наведением на нее указателя мыши.

       Совет: Событие MouseOver и программы его обработки подробно рассматриваются в главе 5.

       Атрибут target используется в HTML-документе, содержащем фреймы. Фреймы представляют собой области окна броузера, используемые для загрузки и отображения других HTML-документов. Значение frameName является именем фрейма, созданного при помощи тега <frame name=frameName> языка HTML. О документах, содержащих фреймы (или фрейм-содержащих документах), и их взаимодействии с JavaScript-программами рассказывается в главе 9. Рассмотрим гипертекстовый документ, который имеет три гиперсвязи, описанные в теге <body>:

<!--
Program 2-1 
-->
<html>
<head>
<script language="JavaScript"> 
<!-- 
var linkText = " ";
function showLinks() {
   var item = 1;
   linkText = "LINK INDEX:\n" +
              "____________________________\n";
  for (n=0; n < document.links.length; n++) {
       linkText += item +". " + document.links[n] + "\n";
       item ++;
       }
  alert (linkText);
}
//-->
</script>
<title>An introduction to the Web</title>
</head>
<body><basefont size=4>
<font size="+1">A</font>N <font size="+1">K/font>NTRODUCTION
<font size="+1">T</font>0 <font size="+1">T</font>HE 
<font size="+1">W</font>EB<hr>
The <a href="http://www.cern.ch">World-Wide Web</a> is that part 
of the <a href="internet.htm">lnternet</a> that deals solely in
hypertext documents. Hypertext is a way of providing multimedia 
content within a document, with the added bonus of allowing links 
known as <a href="hl.htm">hyperlinks</a> to other documents to be 
created.<p>
<form><input type="button" 
             value="Quick Link Index" 
             onClick="showLinks() "></form>
</body>
</html>

       Поскольку при загрузке документа в броузер гиперсвязи записываются в массив links, интерпретатор JavaScript может обращаться к ним, ссылаясь на соответствующий элемент массива. В приведенном примере в конце страницы помещается кнопка для активизации функции showLinks(). Данная функция формирует список гиперсвязей в документе в виде текстовых строк, используя цикл for для просмотра массива links. Затем эти строки выводятся на дисплей с помощью функции alert() языка JavaScript. В главе 3 приведены более подробные сведения об операторах языка JavaScript, таких как оператор цикла for. Обратите внимание на использование кодов "\n" в тексте скрипта. Они предназначены для того, чтобы последующий текст выводился в новой строке. Таким образом, при выполнении приведенной выше программы отображается окно сообщения, в каждой строке которого указано имя гиперсвязи и ее порядковый номер. На рис.2.1 вы видите результат выполнения этой программы при загрузке HTML-документа в броузер Netscape.

       Совет: При обращении к свойствам объектов, таким как links, перед именем свойства необходимо указывать имя объекта, к которому это свойство относится, в данном случае document. Список допустимых объектов и относящихся к ним свойств приведен в приложении Б.


Рис.2.1. Так приведенный выше пример выглядит в броузере Navigator

Свойство anchors
       Метки (anchors) являются объектами назначения для гиперсвязей. Они позволяют организовать связь с определенными частями документа, независимо от его местонахождения. Создаются метки с помощью тега <а name=. . .>, синтаксис которого имеет следующий вид:

<а name="anchorName"
   [href="URLtoLoad"]>
AnchorText
</a>

       Связи с метками организуются посредством тега гиперсвязи <а href >:

<а href="document.htm#anchorName">
linkText
</а>


       где anchorName — имя метки, на которую необходимо сослаться, a document — имя HTML-документа, где определена эта метка. Если метка находится в текущем HTML-документе, имя документа можно не указывать. Если же метка определена в другом документе, необходимо сначала загрузить этот документ в Navigator, а затем перейти к указанной метке.

       Примечание: Наличие в описании гиперсвязи символа #(hash) свидетельствует о том, что эта связь указывает не просто на документ, а на метку в нем. Броузер Navigator даже имеет встроенное свойство hash, которое соответствует текущей метке.

       В гипертекстовых документах метки определяются с помощью тега <а name=anchorName >...</a>. Они пригодятся при формировании предметных указателей и оглавлений, в которых посредством тега <а href> можно создать ссылку на определенный фрагмент текста в любом документе, в том числе и в текущем. Рассмотрим описание ссылки на метку, определенную в документе, находящемся на другом компьютере:

<а href="http://www.somehost.com/filei.htm#section6">Section 6</a>

       Приведенный тег описывает гиперсвязь, которая активизируется после щелчка мыши на тексте Section 6. При этом в Navigator загружается файл filel.htm с Web-сервера www.somehost.com, а затем осуществляется переход к метке section6, т.е. к той части документа, где определен тег <а name="section6" >. Указанная часть документа может содержать текст, например:

<а name="section6">
<h2>РАЗДЕЛ 6 - БАКЛАН ДЛИННОНОСЫЙ</h2>
</а>
Баклан длинноносый распространен на побережье Кольского полуострова,
побережьях Атлантического океана, Средиземного и Черного морей.
Латинское наименование PHALACROCORAX ARISTOTELIS.

       Для локальных меток можно применять сокращенную форму тега <а href>:

<а href="#anchorName">linkText</a>


       Заметьте, что в этом случае другие гипертекстовые документы не загружаются. Предполагается, что метка определена в загруженном в данный момент документе. При активизации гиперсвязей, в описании которых метки не указаны (т.е. символ # отсутствует), вы попадете в начало нового документа, поскольку это является установкой по умолчанию.

Переход к меткам с помошыо JavaScript-программ
       Можно заставить Navigator перейти к метке, определенной в документе, присвоив имя метки (заданное в теге <а name=...>) свойству document, hash. Например, если в документе с именем book.htm определена метка chapter2

<а name="chapter2">
CHAPTER 2 - INTRODUCTION! TO HYPERLINKS<hr>
</а>

       то присвоение имени "chapter2" свойству document.hash с помощью оператора языка JavaScript

document.hash = "chapter2";

       заставит Navigator загрузить ресурс

http://www.somehost.com/book.htm#chapter2

       Предполагается, что файл book.htm находится в корневом каталоге Web-сервера, имеющего адрес www.somehost.com. После загрузки нового документа Navigator выполнит переход к заданной метке. Если такой метки не существует, Navigator откроет документ с начала.

Проверка достоверности меток
       Перед обращением к метке вы можете проверить ее достоверность, хотя эта процедура не так проста, как может показаться. Для проверки существования метки используется свойство document.anchor, которое представляет собой массив меток, определенных в пределах текущего документа. Однако к отдельным элементам этого массива обратиться нельзя, поскольку они возвращают значение null. Чтобы иметь возможность проверить достоверность меток в JavaScript-программе, необходимо для всех меток задать имена в числовой форме по порядку, например <а name="0">, <a name="1"> и т.д., а затем сравнить номера меток со значением свойства document.anchors, lenght. Метки с номерами, превышающими это значение, будут недостоверными (несуществующими), в этом случае можно выдать соответствующее сообщение об ошибке.
       Рассмотрим следующую JavaScript-программу:

<!--
Program 2-2
-->
<html>
<head>
<script language="JavaScript">
<!--
function validateLink(theLink) {
   if (parselnt(theLink) > document.anchors.length)
      alert("Эта метка не определена ");
   else
      location.hash = theLink;
}
//-->
</script>
</head>
<body>
<form>
<input type="button" 
       value="Chapter 1"
       onClick="validateLink('0')">
<input type="button"
       value="Chapter 2"
       onClick="validateLink('1')">
</form>
<a name="0">CHAPTER 1/a>
. . .
<a name="1">CHAPTER 2</a>
. . .
</body>
</html>

       В данном примере текст основного документа пропущен, но все метки приведены. Когда вы щелкаете мышью на кнопке, событие onclick активизирует функцию validateLink () и передает ей в качестве параметра имя метки, например "0" для первой метки. Затем численное значение этого имени (получаемое с помощью функции parseinto) сравнивается с общим количеством меток в документе. Если это значение больше значения свойства document, anchors, lenght, выдается сообщение об ошибке, в противном случае свойству location.hash в качестве значения присваивается имя связи, и Navigator перемещает вас к соответствующей метке документа. Для тестирования этой программы введите между метками длинный текст, чтобы наблюдать за процессом перемещения от метки к метке. Если вы хотите увидеть, что произойдет при попытке перейти к несуществующей метке, замените аргумент в одном из вызовов функции validateLink(), например

<input type="button" 
       value="Chapter 2" 
       onClick="validateLink('3')">

       Кроме того, сообщения об ошибке будут появляться и при нарушении нумерации меток. Попробуйте заменить строку

<а name="1">CHAPTER 2</a>

       строкой

<а name="3">CHAPTER 3</a>

       и изменить соответственно описание второй кнопки:

<input type="button" 
       value="Chapter 3"
       onClick=MvalidateLink('3')">

       Теперь при щелчке мыши на кнопке Chapter 3 появится сообщение о том, что такой метки не существует.

Создание гиперсвязей с помошью метода link()
       Метод link () языка JavaScript предназначен для создания гиперсвязей и имеет синтаксис

lmkText.link (URLName)

       где lmkText является строковым объектом, содержащим текст, на котором пользователь щелкает мышью для активизации гиперсвязи, a URLName — адресом URL ресурса, который должен быть загружен после активизации гиперсвязи. Метод document.write() языка JavaScript может использоваться для динамической записи связей в текущий документ. Рассмотрим функцию JavaScript, которая создает новую гиперсвязь в документе:

<!--
Program 2-3
-->
<html>
<body>
<basefont size=4>
Jason's Home Page can be found
<script languages "JavaScript">
<!--
var linkText = "here";
var theUrl = "http://www.gold.net/users/agl7/index.htm";
document.write(linkText.link(theUrl));
//-->
</script>
and Osborne's Web-site is located on the Internet
<a href="http://www.osborne.com">here</a>
</body>
</html>

       Тег <scnpt> может появиться в любом месте HTML-документа, даже между фрагментами текста в формате HTML. Результат работы этой программы показан на рис.2.2. Вы никогда бы не подумали, что первая гиперсвязь создана динамически.


Рис.2.2. Две гиперсвязи, одна из которых создана динамически

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

<!--
Program 2-4
-->
<html>
<body>
<basefont size=4>
<img src="internal-gopher-menu">&nbsp;Click
<script language="JavaScript">
<!--
var dateToday = newDate();
var day = dateToday.getDay();
var linkText = "here";
var aUrl= "";
if (day == 0) { aUrl="http://www.somehost.com/days/sunday.htm"; }
if (day == 1) { aUrl="http://www.somehost.com/days/monday.htm"; }
if (day == 2) { aUrl="http://www.somehost.com/days/tuesday.htm"; }
if (day == 3) { aUrl="http://www.somehost.com/days/wednesday.htm"; }
if (day == 4) { aUil="http://www.somehost.com/days/thursday.htm"; }
if (day == 5) { aUrl="http://www.somehost.com/days/friday.htm"; } 
if (day == 6) { aUrl="http://www.somehost.com/days/saturday.htm"; }
document.write(linkText.link(aUrl));
//-->
</script>
for today's news.<p>
</body>
</html>

       Здесь создается новый объект Date, который присваивается переменной dateToday в качестве значения. Для определения номера дня недели применен метод getDay () этого объекта. Данный метод возвращает значение 0 для воскресенья, 1 — для понедельника и т.д. Полученное значение используется в ряде операторов if, чтобы выбрать адрес URL, который необходимо задать для гиперсвязи. Для записи гиперсвязи в документ применяется метод document.write(). Обратите внимание, каким образом скрипт встроен в тело документа. Однако HTML-текст можно отделить от текста JavaScript-программы, выделив эту программу в отдельную JavaScript-функцию. Конечный результат будет такой же, но удобочитаемость исходного текста документа повысится.

Создание меток с помошью метода anchor()
       В языке JavaScript кроме метода link(), создающего гиперсвязи, существует метод anchor(), используемый для динамического создания меток в гипертекстовом документе. Синтаксис этого метода следующий:

anchText.anchor(anchName)

       где anchText является текстовым объектом, содержимое которого должно быть помещено в контейнер <а name>. . . </а>, а параметр anchName задает имя метки. В качестве примера рассмотрим следующий фрагмент программы:

var myAnchor = "РАЗДЕЛ 6 - БАКЛАН ДЛИННОНОСЫЙ";
document.open();
document.writeln(myAnchor.anchor("section6"));
document.close()

       В этом фрагменте создается точно такая же метка, как в следующем фрагменте HTML:

<а name="section6"> РАЗДЕЛ 6 - БАКЛАН ДЛИННОНОСЫЙ </а>

Вызов JavaScript-программ при активизации гиперсвязей
       Использование адресов URL, начинающихся с javascript:, позволяет выполнить оператор или вычислить выражение языка JavaScript при активизации гиперсвязей. Такие адреса URL внутри тега гиперсвязи <а href > можно использовать для активизации функций или операторов языка JavaScript. Рассмотрим следующий HTML-документ:

<!--
Program 2-5
-->
<html >
<head>
<script language "JavaScript"> 
<!--
  function myFunction() {
    alert("Hello World!");
  }
//-->
</script>
</head>
<body>
<a href="javascript:myFunction()">Click me</a>
</body>
</html>

       Обратите внимание, как в этом примере атрибут href активизирует функцию JavaScript. Можно использовать также другой способ описания:

<а href="#" onClick="myFunction()">Another way</a>

       в котором символ # является значением атрибута href (таким образом создается "пустая" гиперсвязь, т.е. при активизации этой связи перехода не произойдет), а для запуска функции используется атрибут onClick, описывающий реакцию на щелчок мыши. Применяя второй способ описания гиперсвязи, вы получите тот же результат, что и при использовании первого. Однако второй способ позволяет загрузить определенный ресурс и одновременно активизировать JavaScript-функцию:

<а href="file.htm" onClick="myFunction()">Click me</a>

       В данном случае при щелчке мыши на строке Click me загрузится документ под названием file.htm и запустится определенная пользователем функция myFunction (). Существует множество способов использования таких связей. Например, таким образом можно загружать сразу два фрейма — один динамически и один из внешнего файла. Следующий скрипт создает документ, содержащий два фрейма одинакового размера, расположенные друг над другом. В верхний фрейм (topFrame) загружается другой документ, а нижний обновляется динамически.*{Пример 2-6 в броузере Microsoft Internet Explorer не работает.}

<!--
Program 2-6
-->
<html>
<head>
<script language="JavaScript">
<!--
   function myFunc() {
      parent.frames[1].document.open();
      parent.frames[1].document.write("This is some " +
                                      "automatically " + 
                                      "loaded frame-text.");
      parent.frames[1].document.close(); 
   }
var topFrame = "<a href='http://www.osborne.com' " +
               "onClick='parent.myFunc()'>Click me</a>"; 
var botFrame = ""; // Empty to start with 
//--> 
</script> 
</head>
<frameset rows="50%,*">
<frame src="javascript:parent.topFrame">
<frame src="javascriptrparent.botFrame">
</frameset>
</html>

       Заметьте, что методы ореn() и close() использовать обязательно, в противном случае содержимое верхнего фрейма может быть не выведено на экран. При необходимости загрузить во фрейм локальный файл с вашего жесткого диска используйте адрес URL локального файла в форме:

file:///driveLetter%7c/directory/filename

       Или же запишите составное выражение "<base href="+location+">" в тот же самый фрейм, в котором размещается гиперсвязь <а href >, причем строка location представляет объект location языка JavaScript, или впишите адрес URL для фрейма. Учтите, что Navigator не найдет нужный файл, если не применить один из этих методов. Скрипт, приведенный ниже, работает так же, как и предыдущий, однако он использует тег <base href >. Обратите внимание на то, что префикс адреса URL удален из этого файла:

<!--
Program 2-7 
-->
<html>
<head>
<script language="JavaScript">
  function myFunc() {
     parent.frames[1].document.open();
     parent.frames[1].document.write("This is some newly "+
                                     "loaded frame-text.");
     parent.frames[1].document.close();
   }
var topFrame = "<base href="+location+">" +
               "<a href='file.htm1 " +
               "onClick='parent.myFunc()'>Click me</a>";
var botFrame = ""; 
//-->
</script>
</head>
<frameset rows="50%,*">
<frame src="javascript:parent.topFrame">
<frame src="javascriptrparent.botFrame">
</frameset>
</html>

       Более подробная информация о документах, содержащих фреймы, приведена в главе 9.

Управление свойством link при помощи объекта document
       В JavaScript-программе можно изменить свойства объекта document, относящиеся к гиперсвязям. Например, если присвоить свойствам link-Color и vlinkColor другие значения, цвета гиперсвязей, используемые броузером Navigator, поменяются. В данном случае в качестве значений присваиваются либо зарезервированные слова, распознаваемые броузером Netscape, например Black, либо триплеты RGB (#RRGGBB), заданные в шестнадцатеричном формате (0-FF), где RR — это красный цвет, GG — зеленый, а ВВ — голубой. Более подробная информация о задании цветов приведена в приложении Ж.
       Свойство aLinkColor описывает цвет активной связи. Активная связь — это гиперсвязь в момент нажатия кнопки мыши. После того как кнопка мыши отпущена, цвет связи (по умолчанию) описывается значением свойства linkColor (в броузере Navigator по умолчанию установлен голубой цвет). Свойство vlinkColor описывает цвет посещенной связи, т.е. гиперсвязи, активизированной во время текущего либо предыдущего сеанса работы с броузером Navigator и сохраненной в файле netscape.hst. Можно изменить цвет каждой гиперсвязи на странице с помощью единственного оператора JavaScript

document.linkColor = "Yellow";

       где Yellow — зарезервированное слово, представляющее RGB-триплет "#FFFF00", т.е. 100% красного цвета, 100% зеленого и 0% голубого. Поэтому следующий оператор эквивалентен предыдущему:

document.linkColor = "#FFFF00";

       Приведенный выше оператор работает только в Netscape 2.x и 3.x. Обе схемы обозначения цветов поддерживаются броузером Netscape 2.x, но зарезервированные слова для обозначения цветов не распознаются в Netscape 1.x. Возможность изменять цвета гиперсвязей позволяет по-новому оформить множество связанных HTML-файлов. Рассмотрим HTML-документ, содержащий скрипт, который изменяет цвет активной гиперсвязи в зависимости от дня недели:

<!--
Program 2-8 
-->
<html>
<head>
<script language="JavaScript">
function changeLinkColors () { 
  var dateToday = new Date(); 
  var dayToday = dateToday.getDay();
  var linkText = "here";
  var theUrl = "";
  if (dayToday == 0) { document.linkColor = "Yellow" } // Sun 
  if (dayToday == 1) { document.linkColor = "Aqua"   } // Mon 
  if (dayToday == 2) { document.linkColol = "White"  } // Tue 
  if (dayToday == 3) { document.linkColor = "Red"    } // Wed 
  if (dayToday == 4) { document.linkColor = "Blue"   } // Thu 
  if (dayToday == 5) { document.linkColor = "Green"  } // Fri 
  if (dayToday == 6) { document.linkColor = "Black"  } // Sat
}
changeLinkColors();
//-->
</script>
</head>
<body>
<basefont size=4>
В воскресенье цвет <а href="this.htm">этой</a> связи
определяется с помощью зарезервированного
слова <font color="Yellow">Yellow</font>.
</body>
</html>

       Программа, приведенная в данном примере, работает по тому же принципу, что и программа, заменяющая имена гиперсвязей (см. предыдущий пример). Только в этом случае изменяется значение свойства linkColor объекта document. Обратите внимание на использование тега <font color=...>, который представлен в Navigator 2.0, а также на то, что функция changeLinkColors (), устанавливающая цвета связей, вызывается автоматически при загрузке документа.

Использование гиперсвязей в клиентских сенсорных изображениях
       Сенсорное изображение — это рисунок, разделенный на множество участков, называемых горячими областями (hot-spots), каждая из которых, как правило, связана с определенным ресурсом. До появления броузера Netscape версии 2.0 сенсорные изображения использовались только на серверах. Теперь благодаря новому HTML-контейнеру <map>. . . </map> сенсорные изображения можно применять и на клиентских компьютерах. Синтаксис тега <тар> имеет следующий вид:

<map name="mapName">
<area shape="poly" | "rect" | "circle" coords="coordList..."
      href=flfileOrUrl"> 
</map>

       Каждый тег <area> идентифицирует отдельную горячую область сенсорного изображения, которая после щелчка мыши на ней активизирует гиперсвязь (благодаря атрибуту href) и загружает определенный ресурс. Используя адрес URL типа javascript: ..., щелчком мыши можно вызвать функцию JavaScript. Горячие области базируются на схеме адресации пикселов х, у (эта система координат начинается в верхнем левом углу изображения с точки 00, 00).
       Многоугольники (poly) — это фигуры, широко используемые для определения сложных форм, например для рисования границ стран. Более простые участки можно задать с помощью атрибутов rect (прямоугольник) и circle (окружность). Прямоугольники определяются по координатам их верхнего левого и нижнего правого углов, а окружности — по координатам их центра и одной из точек, лежащей на окружности. Ниже приведен простой пример определения многоугольника:

<map name="myМар">
     <area shape="poly" coords="2,l 109,1 194,1 4,191 2,1"
           href="http://www.somehost.com/somefile1.htm">
</map>

       Заметьте, что многоугольники задаются через координаты своих вершин. Описывая многоугольники, старайтесь образовывать замкнутую область (как в приведенном примере). Для этого начальная и конечная координаты должны иметь одинаковые значения. Прямоугольники — это более простые фигуры, потому что они определяются через координаты всего двух точек — верхнего левого и нижнего правого углов. Например:

<map name="myMap">
     <area shape="rect" coords="146,145 247,228"
     href="http://www.somehost.com/somefile2.htm">
</map>

       Окружности записываются в виде:

<map name="myMap">
     <area shape="circle" coords="248,82 196,66"
     href="http://www.somehost.com/somefile3.htm">
</map>

       где первая пара координат принадлежит точке на окружности. Чтобы перейти к координатам точек, потребуется помощь программного обеспечения, потому что процесс вычисления этих координат может быть довольно сложным. Для точного задания координат воспользуйтесь одним из следующих инструментов:
       — специализированным редактором сенсорных изображений, например Mapedit (см. приложение В, чтобы узнать местонахождение этого программного продукта), для создания всех участков и формирования файла изображения, который можно будет встроить в JavaScript-приложение;
       — любым редактором изображений, позволяющим отображать координаты точек, например стандартной программой Paint. Впоследствии можно преобразовать созданное изображение в формат GIF или JPEG. Для этого используют условно-бесплатные (shareware) инструментальные программные средства, такие как Lview и GifEdit.
       Чтобы связать изображение с тегом <map>, обратитесь к несколько видоизмененному тегу <img src>, который включает атрибут usemap. Атрибут ismap, применявшийся в этом теге ранее, сохранен. Однако его можно использовать только в серверных системах сенсорных изображений. Например, следующий тег связывает рисунок с сенсорным изображением:

<img src="fileOrUrl" usemap="#mapName">

       Здесь mapName — имя, заданное в атрибуте name тега <map>, который должен предшествовать тегу <img>. Ниже приведено готовое приложение. Как видите, чем подробнее описывается горячая область, тем больше координат требуется для этого описания. Вы можете сократить число координат многоугольников, используя вместо них прямоугольники. Чтобы указать, где именно щелкать мышью, прямоугольники можно поместить в изображение.

<!--
Program 2-9
-->
<html>
<head>
<title>MCGRAW-HILL: EUROPE SALES & MARKETING TEAM</title>
<script language="JavaScript">
<!--
  var mapFrame =
    "<base href=" + location + ">" +
    "<body bgcolor=fBlack' background='backl.gif' text='White'>" + 
    "<map name='europe'>" +
    "<area shape='poly' coords='51,8 63,10 61,19 77,21 68,36 " + 
    "95,70 103,73 107,80 101,85 101,91 98,93 88,98 80,97 61,102 " + 
    "66,105 63,105 52,103 49,106 45,107 42,107 53,96 55,92 59,91 " + 
    "47,90 46,86 46,83 29,84 16,93 1,87 2,77 10,67 6,61 9,51 " + 
    "17,54 23,44 36,43 44,44 41,42 43,36 30,37 34,20 34,12 41,5 " + 
    "47,5 51,6' href=fjavascript:parent.UnitedK()'>" + 
    "<area shape='poly' coords='149,154 144,156 151,160 146,163 " + 
    "146,168 152,172 166,170 172,172 175,177 183,185 184,191 " + 
    "191,195 196,198 198,202 203,206 206,205 208,207 211,211 " + 
    "216,212 216,218 215,223 205,224 198,225 188,228 183,236 " + 
    "221,235 223,231 229,230 233,224 234,218 234,216 231,214 " + 
    "235,213 239,213 243,209 240,201 231,198 228,198 228,194 " + 
    "218,191 214,193 208,187 207,180 206,175 199,167 198,160 " + 
    "203,159 203,150 185,140 175,142 168,148 164,154 161,150 " + 
    "154,151 151,154' href='javascript:parent.Italy()'>" + 
    "<area shape='poly' coords='164,47 164,55 166,62 159,63 " + 
    "152,63 151,77 150,82 146,85 144,92 146,98 146,99 142,103 " + 
    "141,107 145,109 147,114 142,116 149,118 156,119 156,123 " + 
    "155,130 158,135 164,136 170,137 179,136 184,136 186,138 " + 
    "193,138 196,135 198,128 197,118 192,113 188,107 188,103 " + 
    "194,101 198,100 205,97 211,94 215,89 212,82 209,78 " + 
    "204,75 204,66 206,59 205,55 201,54 190,56 184,57 183,58 " + 
    "181,58 178,56 171,51 170,48 163,48' " + 
    "href='javascript:parent.Netherlands() '>" +
    "<area shape='poly' coords='141,65 139,73 134,74 135,69 " +
    "132,68 125,76 125,85 126,88 122,90 118,91 114,92 125,95 " +
    "126,101 133,105 136,109 141,110 137,104 142,98 142,93 " +
    "142,82 149,77 149,66 139,65' " +
    "href='javascript:parent.Netherlands()'>" +
    "<area shape='polyf coords='174,22 177,31 179,34 177,37 " +
    "174,39 169,44 171,47 161,45 161,37 161,34 161,30 165,30 " +
    "169,28 172,25 176,20' " +
    "href='javascript:parent.Netherlands()'>" +
    "<area shape='poly' coords='108,95 103,97 103,109 100,109 " +
    "89,111 88,116 80,115 74,111 73,111 73,118 65,120 56,118 " +
    "52,121 50,126 55,136 57,137 58,138 63,142 71,143 73,148 " +
    "75,150 75,157 75,163 74,170 74,175 76,180 91,186 102,186 " +
    "108,189 119,191 122,183 126,178 127,178 137,181 141,181 " +
    "150,177 153,173 141,169 142,158 140,155 147,150 147,139 " +
    "159,138 151,133 152,122 138,118 138,111 131,111 128,107 " +
    "123,104 122,98 115,96 109,95 107,95' " +
    "href='javascript:parent.France()'>" +
    "<area shape='poly' coords='287,0 258,21 255,33 248,49 " +
    "240,46 230,46 219,52 212,57 211,59 209,59 208,72 216,82 " +
    "219,92  198,103 191,106 203,122 198,136 194,141 207,149 " +
    "220,148 230,153 246,157 252,153 259,153 264,152 264,158 " +
    "276,171 277,174 276,182 281,193 296,194 299,196 300,197 " +
    "311,192 312,195 323,198 330,199 339,199 346,200 345,0 " +
    "285,0 286,0'" + 
    "href='javascript:parent.Europe()'>" +
    "<area shape='default' href='javascript:parent.Default()'>" +
    "</map>" +
    "<basefont size=5>" +
    "<img align='right' hspace=10 border=l src='europe.gif' " +
    "usemap='#europe'><br>" +
    "<img align='left' src='compass.gif'>&nbsp;McGRAW-HILL " +
    "EUROPE i SALES & MARKETING<p><br clear= 'left'>" +
    "<basefont size=3>" +
    "<dlxdd><img width=ll src='bullet.gif'>&nbsp;Please click on " +
    "a country using your mouse.<p>" +
    "<ddximg width=ll src='bullet.gif'>&nbsp;A list of " +
    "representatives for " +
    "this region will then be shown in the lower window. </dl><br>";
    function Germany() {
       parent.frames[1].location.hash="int"; 
    } 
    function Netherlands() {
       parent.frames[1].location.hash="nether";
    } 
    function France () {
       parent.frames[1].location.hash="int"; 
    } 
    function UnitedK() {
       parent.frames[1].location.hash="uk";
    }
    function Spain() {
       parent.frames[1].location.hash="int"; 
    } 
    function Italy() {
       parent.frames[1].location.hash="int";
    } 
    function EEurope() {
       parent.frames[1].location.hash="int";
    } 
    function Default () {
       parent.frames[1].location.hash="top";
    } 
//-->
</script>
</head>
<frameset rows="40%,*">
<frame src="javascript:parent.mapFrame">
<frame src="europe2.htm">
</frameset>
</html>

       На рис.2.3 показано окно популярной программы Mapedit с файлом изображения europe.gif, использованном в этом примере. Программа Mapedit записывает в файл с расширением .map определенные вами координаты изображения. Вы можете затем открыть этот файл в текстовом редакторе и включить его в вашу JavaScript-программу.


Рис.2.3. Окно программы Mapedit с файлом europe.gif

       Если навести курсор мыши на определенную страну, в строке состояния броузера Navigator появится название функции, которая будет активизирована при щелчке мыши. Обратите внимание на тег <area shape='default'>. Фигура под названием default связана с обработкой щелчков мыши на неопределенных участках сенсорного изображения. В этом случае вызывается функция Default(), присваивающая свойству hash значение "top". Тег метки <а name=' top' > определен в начале файла europe2.htm и перемещает вас в начало документа.
       Файл europe2.htm, загружаемый в нижний фрейм, представляет собой HTML-документ, содержащий ряд тегов <а name>, к которым с помощью свойства location.hash могут обращаться различные функции, включенные в скрипт. Таким образом, вы можете переместиться к определенному участку документа в зависимости от страны, на которой вы щелкаете мышью. Например, следующий фрагмент извлечен из HTML-документа для Великобритании. Переход к этому фрагменту выполняется в соответствии с тегом метки <а name="uk">.

<а name="uk">
<font size="+l">U</font>NITED
<font size="+l">K</font>INGDOM &
<font size="+l">R</font>EPUBLIC OF
<font size="+l">I</font>RELAND<br>
<img src="line.gif" width="60%" height=2><br>
</a>
<dl>
<dt><img src="bullet .gif" width=10>&nbsp;
<font size="+l">F</font>RED <font size="+l">P</font>ERKINS
<dd><img src="rb.gif" width=10>&nbsp; Group Vice President,
Europe<br>
</dl>

       Документы и рисунки, необходимые для запуска этого примера, находятся на прилагаемой к книге дискете.

Заключение
       Гиперсвязи обеспечивают возможность обращения к ресурсам, расположенным в World Wide Web, независимо от расстояния. Они представляют собой базовое средство для навигации в море HTML-документов.
       — Гиперсвязь создается при помощи тега <а href> языка HTML. Она дает возможность загружать в Navigator различные Web-ресурсы, например гипертекстовые страницы. Метка (anchor) является объектом назначения для гиперсвязи и может существовать только в пределах HTML-документа. Метки — это опорные точки, предназначенные для быстрого перемещения по гиперсвязям к определенным частям документа.
       — Тегам гиперсвязей <а href> соответствуют элементы массива links[] языка JavaScript точно так же, как теги меток <а name> соответствуют элементам массива anchors[].
       — Метки и связи могут создаваться либо с помощью HTML-тегов, либо динамически, посредством методов anchor() и Link() языка JavaScript.
       Свойство hash объекта location можно использовать для перемещения к метке с заданным именем, т.е. к определенному тегу <а name>. Таким образом, свойство hash имитирует тег гиперсвязи <а href >. Свойство hash применяется и для проверки достоверности метки перед обращением к ней.
       — В клиентских сенсорных изображениях для активизации функций иливыполнения операторов языка JavaScript можно использовать адресаURL, начинающиеся с javascript:. Указание адресов URL со ссылкой на JavaScript в атрибуте href тега <агеа> позволяет активизировать программу, выполнение которой будет зависеть от выбранных координат х, у. Для задания координат сенсорных изображений используйте редактор сенсорных изображений, такой как Mapedit, а затем включайте эти изображения в документ как фрагменты на языке JavaScript или HTML.




<<< Пред. Оглавление
Начало раздела
След. >>>

Дата последнего изменения:
Thursday, 21-Aug-2014 09:10:56 MSK


Постоянный адрес статьи:
http://az-design.ru/Projects/WebStat/JS/01b020.shtml