Пример 1. Следующий пример создаёт гипертекстовую ссылку на якорь javascript_intro:
<A HREF="#javascript_intro">Introduction to JavaScript</A>
Пример 2. Здесь создаётся гиперссылка на якорь numbers в файле doc3.html в окне window2. Если window2 не существует, оно создаётся.
<LI><A HREF=doc3.html#numbers TARGET="window2">Numbers</A>
Пример 3. Здесь пользователь переходит на x вхождений назад в списке history:
<A HREF="javascript:history.go(-1 * x)">Click here</A>
Пример 4. Здесь создаётся гиперссылка на URL. Пользователь может использовать набор радио-кнопок для выбора из трёх URL. Обработчик onClick ссылки устанавливает URL (свойство href ссылки) на основе выбранной кнопки. Ссылка также имеет обработчик onMouseOver, который изменяет свойство status окна. Как показано в примере, Вы обязаны вернуть true для установки свойства window.status в обработчике onMouseOver.
<SCRIPT> var destHREF="http://home.netscape.com/" </SCRIPT> <FORM NAME="form1"> <B>Choose a destination from the following list, then click "Click me" below.</B> <BR><INPUT TYPE="radio" NAME="destination" VALUE="netscape" onClick="destHREF='http://home.netscape.com/'"> Netscape home page <BR><INPUT TYPE="radio" NAME="destination" VALUE="sun" onClick="destHREF='http://www.sun.com/'"> Sun home page <BR><INPUT TYPE="radio" NAME="destination" VALUE="rfc1867" onClick="destHREF='http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt'"> RFC 1867 <P><A HREF="" onMouseOver="window.status='Click this if you dare!'; return true" onClick="this.href=destHREF"> <B>Click me</B></A> </FORM>
Пример 5: Массив links. В этом примере функция linkGetter использует массив links для вывода значений каждой ссылки текущего документа. Этот пример определяет также несколько ссылок и кнопку для запуска linkGetter.
function linkGetter() { msgWindow=window.open("","msg","width=400,height=400") msgWindow.document.write("links.length is " + document.links.length + "<BR>") for (var i = 0; i < document.links.length; i++) { msgWindow.document.write(document.links[i] + "<BR>") } }<A HREF="http://home.netscape.com">Netscape Home Page</A> <A HREF="http://www.catalog.com/fwcfc/">China Adoptions</A> <A HREF="http://www.supernet.net/~dugbrown/">Bad Dog Chronicles</A> <A HREF="http://www.best.com/~doghouse/homecnt.shtml">Lab Rescue</A> <P> <INPUT TYPE="button" VALUE="Display links" onClick="linkGetter()">
Пример 6: Обращение к Area-объекту через массив links. Здесь код обращается к свойству href первого Area-объекта, показанного в Примере 1.
document.links[0].href
Пример 7: Area-объект с обработчиками onMouseOver и onMouseOut. Здесь выводится изображение globe.gif. Это изображение использует карту изображений/image map, которая определяет области верхней и нижней половин рисунка. Обработчики onMouseOver и onMouseOut выводят разные сообщения в статусной строке в зависимости от того, проходит курсор мыши над верхней или нижней половиной рисунка. Атрибут HREF необходим при использовании обработчиков onMouseOver и onMouseOut, но в этом примере рисунок не должен быть гиперссылкой, поэтому атрибут HREF выполняет javascript:void(0), которая ничего не делает.
<MAP NAME="worldMap"> <AREA NAME="topWorld" COORDS="0,0,50,25" HREF="javascript:void(0)" onMouseOver="self.status='You are on top of the world';return true" onMouseOut="self.status='You have left the top of the world';return true"> <AREA NAME="bottomWorld" COORDS="0,25,50,50" HREF="javascript:void(0)" onMouseOver="self.status='You are on the bottom of the world';return true" onMouseOut="self.status='You have left the bottom of the world';return true"> </MAP> <IMG SRC="images\globe.gif" ALIGN="top" HEIGHT="50" WIDTH="50" USEMAP="#worldMap">
Пример 8: Симуляция обработчика onClick Area-объекта через использование атрибута HREF. Следующий пример использует атрибут HREF Area-объекта для выполнения функции JavaScript. Выводимый рисунок, colors.gif, показывает два цвета. Верхняя половина рисунка имеет цвет antiquewhite, а нижняя - white. Если пользователь щёлкает по верхней или нижней половине рисунка, функция setBGColor изменяет цвет фона документа на цвет из рисунка.
<SCRIPT> function setBGColor(theColor) { document.bgColor=theColor } </SCRIPT> Click the color you want for this document's background color <MAP NAME="colorMap"> <AREA NAME="topColor" COORDS="0,0,50,25" HREF="javascript:setBGColor('antiquewhite')"> <AREA NAME="bottomColor" COORDS="0,25,50,50" HREF="javascript:setBGColor('white')"> </MAP> <IMG SRC="images\colors.gif" ALIGN="top" HEIGHT="50" WIDTH="50" USEMAP="#colorMap">