Последняя модификация: 10.08.2014 г

Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/links.html

Ссылки и окна. Внешний вид и внутреннее содержание.

1. Ссылки
   • Варианты ссылок и их особенности
   • Внешний вид ссылок
2. Навигационные карты
3. Атрибуты ссылок
4. Фреймы (Frame)
5. Различные команды, могущие использоваться в ссылках
6. Примеры ссылок использующих дополнительные атрибуты
7. Окна
8. Особые окна IE

Ссылки.

Варианты ссылок и их особенности

Обычная ссылка. Главной особенностью которой является то, что ничего особенного в ней нет. Ссылка, как ссылка. Ее внешним видом легко управлять с помощью CSS (см. «Внешний вид ссылок» ниже).

<A HREF="myfile.html">Перейти</A>

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

<A HREF="myfile.html"><IMG SRC="myimage.GIF" alt='Перейти'></A>

Ссылка с рисунком и текстом. Сочетает в себе особенности первых двух. При этом рисунок привлекает внимание, а текст поясняет назначение ссылки. При переходе по ссылке ее внешний вид, не считая вида рисунка, меняется автоматически.

<A HREF="myfile.html"><IMG SRC="myimage.GIF" alt='Перейти'> Перейти</A>

Ссылка-кнопка. Главной особенностью является неисправимая неопределенность поведения указателя мыши: При приближении к кнопке он превращается в руку, но тут же возвращается к стрелке, принятой для кнопок. Внешний вид легко управляется с помощью CSS (например, style="background:Maroon;color:Yellow" где в качестве background можно указать и рисунок) и может не уступать рисункам, при значительно меньшем весе. Можно настроить автоматическое его изменение при переходе по ссылке. Учитывая минимальный труд по созданию кнопки, этот вариант можно назвать кнопкой для ленивых.

<A HREF="myfile.html"><INPUT TYPE='SUBMIT' VALUE='Перейти'></A>

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

<A HREF="myfile.html"></a>

Ссылка, где адрес заменяется действием, которое может быть и переходом на этот адрес (или другой адрес). Действие определяется командой JavaScript. Особенностью ссылки является возможность указания сразу нескольких действий или действия, неожидаемого посетителем. Если переход на адрес, указанный в HREF="myfile.html" требуется отменить, в конце скрипта следует указать «return false;».

<A HREF="myfile.html" onClick=" window.location='myotherfile.html'; return false;">Перейти</A>

Ссылка без адреса. Атрибут HREF="" используется для изменения формы указателя мыши и подчеркивания текста. Действие определяется командой JavaScript. Особенностью ссылки является ее сокрытие от поисковых машин (и не графических браузеров). Может применяться для обеспечения перехода посетителей на другие сайты, но недопущения перехода туда поисковых роботов. Поскольку адрес перехода не отображается в строке состояния, его следует указать либо в Title, либо в событии «onmouseover» (onmouseover="window.status='myfile.html';return true;" onmouseout="window.status='';return true;"), однако, такое изменение строки состояния не всегда работает в Опере (только после состоявшегося перехода) – текст Title надежней. Для избежания ошибок обязателен «return false;» (например, IE, при пустой ссылке открывает каталог).

<A HREF="" onClick="window.location ='myfile.html'; return false;">myfile.html</A>

Ссылка заменена меткой. Style определяет внешний вид. Действие определяется командой JavaScript. Аналогична предыдущей, с той разницей, что цвет ссылки не меняется автоматически при переходе. Курсор не переопределяется в Mozilla.

<a name="1" style="color:blue; text-decoration:underline; cursor:hand"
 onclick="window.location='myfile.html';">Перейти</a>

Ссылка заменена обычным текстом. Style определяет внешний вид. Действие определяется командой JavaScript. Как и у двух предыдущих, статус не отображается, цвет автоматически не меняется. Курсор не переопределяется в Mozilla.

<span style="color:blue; text-decoration:underline; cursor: hand" onclick = "window.location ='myfile.html';">Перейти</span>

Кнопка. Действие определяется командой JavaScript. Похожа на вышеупомянутую кнопку, но указатель не пытается переопределяться, и поисковые машины не переходят.

<INPUT TYPE='SUBMIT' VALUE='Перейти' onclick="window.location='myfile.html';">

Еще кнопка. Действие определяется командой JavaScript (благодаря чему, вместо SUBMIT можно использовать BUTTON. В отличие от предыдущей, помещено в форму.

<FORM><INPUT TYPE=SUBMIT VALUE="Перейти" onClick="window.location='myfile.html';"> </FORM>

Ссылка с явным указанием команды скрипта. Поисковые машины не должны переходить. Цвет при переходе автоматически меняется только в IE.

<A HREF="javascript:window.location='myfile.html';">Перейти</A>

Еще одна кнопка. Обходится без всяких скриптов, за счет того что помещена в форму, методом которой назначен "get" (получить). Такая кнопка может быть только типа SUBMIT, так как кнопки другого типа могут не работать в некоторых браузерах.

<FORM action="myfile.html" method="get"><INPUT TYPE=SUBMIT VALUE="Перейти"></FORM>

Ссылка-форма. Можно указать что, методом формы является GET, но это не обязательно, так как это метод по умолчанию. Возможно, когда-нибудь, поисковики станут переходить по ссылкам JavaScript, но отправлять формы, вместо человека, никогда не станут. Данная ссылка имитирует отправку формы, а та, в свою очередь, загружает в браузер файл myfile.html, как сделала бы обычная ссылка – абсолютное сокрытие ссылки от поисковой системы.

<FORM action="myfile.html" name=frm1><A HREF="javascript:document.frm1.submit();">Перейти</A></FORM>

Внешний вид ссылок

Внешний вид ссылок можно оставить на усмотрение браузера, однако, многих типает от единообразия стандартного вида и они:

1. Переопределяют внешний вид своих ссылок.
2. Относятся к непереопределенным ссылкам как к непрофессиональным.

Насколько правомерно считать непрофессиональным стандартную ссылку – вопрос, который, наверное, никогда не получит окончательного ответа. У стандартных ссылок есть одно преимущество: даже не искушенному посетителю понятно, что это ссылка. А если сделать ссылки черными и не подчеркнутыми, то, неизвестно, поймет ли кто-либо их назначение. Поэтому, переопределяя вид ссылок, не следует далеко уходить от стандарта.

Переопределение вида ссылок разумно поместить в стили. Например:

<style>
A:link {color:rgb(0,0,200)}
A:visited {color:red}
A:hover {color:rgb(15,0,190); font-weight: bold}
A:active {color:lime}
</style>

В качестве особых примеров можно рассмотреть приближение вида ссылки к виду кнопки (1), переменный задний план (2) и изменение вида обычной кнопки (3).

1. Ссылки, имитирующие кнопки.

   <style>
   :link {border:solid 2px;border-color:#e6e6e6 gray gray #e6e6e6;
      Padding:0 3; background:Maroon;color:white; text-decoration:none}
   :visited {border:solid 2px;border-color:#e6e6e6 gray gray #e6e6e6;
      Padding:0 3; background:Maroon;color:red; text-decoration:none}
   :hover {color:yellow}
   :active {border-color:gray #e6e6e6 #e6e6e6 gray;
      color:lime; margin-left:1pt}
   </style>
   

   Ссылка определяется обычным образом:

   <a href="" title="Нажатие не вызовет перехода" onClick="return false;">Проверить</a>
   

   Если соответствующий вид должна иметь только часть ссылок, их стиль было бы логично определить как:

   :hover.1 {color:yellow}
   

   А ссылки объявить как

   <a href="" title="Нажатие не вызовет перехода" onClick="return false;" class=1 >Проверить</a>
   

   (добавив в них класс). Но, с учетом Mozilla, который, по определению, не может в точности соответствовать инструкциям CSS, и не признает классов ссылок, часть ссылок следует оформлять через контекстный селектор:

   .R1 :link {border:solid 2px; border-color:#e6e6e6 gray gray #e6e6e6;
      Padding:0 3; background:Maroon;color:white; text-decoration:none}
   .R1 :visited {border:solid 2px;
      border-color:#e6e6e6 gray gray #e6e6e6; Padding:0 3; background:Maroon;color:red;
      text-decoration:none}
   .R1 :hover {color:yellow}
   .R1 :active {border-color:gray #e6e6e6 #e6e6e6 gray;
      color:lime; margin-left:1pt}
   

   А ссылки поместить в контейнер класса:

   <P class=R1><a href="" title="Нажатие не вызовет перехода" onClick="return false;" >Проверить</a>
   

   Получаем вариант для части ссылок, работающий в трех основных браузерах – Opera, Mozilla, Internet Explorer (просмотренная ссылка): Проверить
   В IE данная «нажатая» кнопка отпустится только при щелчке в другом месте документа. Это можно было бы исправить, включив обработку события onmouseover (для изменения вида кнопки сразу после щелчка, не дожидаясь, пока мышь уйдет), или onmouseout (для изменения при уходе мыши). Но в реальной ссылке произошол бы переход к другому документу и о состоянии кнопки никто не узнает. Так что, увеличивать объем кода не имеет смысла.
   Если текст ссылки состоит из нескольких слов, избежать их автоматического переноса (который выглядел бы очень некрасиво) можно с помощью атрибута «white-space:nowrap», вставляемого в определение базового класса (в данном случае R1). Например:

   P. R1 {white-space:nowrap}
   

   Переменный задний план (для примера взят рисунок, хотя можно и просто фон).

   Вариант для нормальных браузеров и всех ссылок:

   <style>
   :link {width:22px; height:22px; background:url("b1.gif"); vertical-align:middle}
   :visited {width:22px; height:22px; background:url("b2.gif"); vertical-align:middle}
   :hover {background:url("b3.gif")}
   :active {background:url("b4.gif")}
   </style>
   

   Для части ссылок, с учетом особенностей Mozilla, который, помимо всего прочего, не признает определение размеров (width:22px; height:22px;) для обычных элементов, стили придется модифицировать:

   <style>
   .R2 :link {width:22px; height:22px; padding:2 11; background:url("b1.gif") no-repeat center;
       vertical-align:middle}
   .R2 :visited {width:22px; height:22px; padding:2 11; background:url("b2.gif") no-repeat center;
       vertical-align:middle}
   .R2 :hover {background:url("b3.gif")}
   .R2 :active {background:url("b4.gif")}
   </style>
   

   (padding слева и справа должен соответствовать половине размера рисунка, а вверх и вниз, этой же половине, с вычетом половины высоты строки).

   Ссылка объявляется как:

   <P class=R2><a href="" title="Нажатие не вызовет перехода" onClick="return false;" ></a>
   

   Получаем (просмотренная ссылка):

   Как и в предыдущем примере, Explorer тормозит со сменой вида кнопки. Но нас это не должно волновать.

   Такого же результата можно было добится и с помощью чистого скрипта, без определения стилей:

   <a href="" title="Нажатие не вызовет перехода" onmouseover="document.MyImg.src='b3.gif';"
    onmouseout="document.MyImg.src='b1.gif'" onClick="document.MyImg.src='b4.gif';
    return false;"><IMG NAME=MyImg SRC='b1.gif' BORDER=0>
   </a>
   

   Получаем (обычная ссылка):

   Но, в этом случае, «нажатой» и покрасневшей, кнопка станет только после отпускания мыши. Да и срабатывает CSS быстрее. А главное: при наличие 2-3 таких кнопок, метод CSS становится экономичней, за счет повторения лишь текста самой ссылки, в то время как, скрипту приходится описывать все действия заново. А это имеет смысл только в том случае, если кнопки различны (например, имеют различные надписи)... Хотя надписи стоило бы вынести на передний план, а однотипные рисунки кнопок – на задний, как в приведенном ниже примере (вместо длинного рисунка кнопки применено повторение небольших рисунков, но это только пример и создавать-заргужать для него новые рисунки нет необходимости).

   Ссылка Ссылка 2 Еще ссылка Меню Классическое Такое

   Для нормальных браузеров для этого меню достаточно такого кода:

   <style>
     .R4 :link, .R4 :visited {text-align:center;color:black; TEXT-DECORATION: none;
         font-weight:Bold; vertical-align:middle;width:110px; height:22px; background:url("b1.gif");}
     .R4 :hover {color:red;background:url("b3.gif")}
     .R4 P {margin:0;Padding:0;text-indent:0pt;}
   </style>
   
   <div class=R4>
   <P>&nbsp;
   <P><a href="" title="Нажатие не вызовет перехода"
    onClick="return false;">Ссылка</a>
   <P><a href="" title="Нажатие не вызовет перехода"
    onClick="return false;">Ссылка 2</a>
   <P><a href="" title="Нажатие не вызовет перехода"
    onClick="return false;">Еще ссылка</a>
   <P><a href="" title="Нажатие не вызовет перехода"
    onClick="return false;">Меню</a>
   <P><a href="" title="Нажатие не вызовет перехода"
    onClick="return false;">Классическое</a>
   <P><a href="" title="Нажатие не вызовет перехода"
    onClick="return false;">Такое</a>
   <P>&nbsp;
   </div>
   

   Где цвета и некоторые другиа атрибуты задавать не обязательно. Но в Mozilla этот вариант выглядит плачевно, так как фон занимает не 110 заданных пикселей, а только ту часть, что занята текстом. Для полной совместимости код придется изменить:

   <style>
     .R4 :link, .R4 :visited {text-align:center;color:black; TEXT-DECORATION: none;font-weight:Bold}
     .R4 P {margin:0;Padding:0;text-indent:0pt;}
     :link #I, :visited #I {text-align:center;color:black; TEXT-DECORATION: none;font-weight:Bold;
      vertical-align:middle;width:110px; height:22px; background:url("b1.gif");}
     :hover #I {color:red;background:url("b3.gif");cursor:'hand'}
   </style>
   
   <table class=R4>
   <tr><td>
   <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">
   <div id=I>Ссылка</div></a>
   <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">
   <div id=I>Ссылка 2</div></a>
   <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">
   <div id=I>Еще ссылка</div></a>
   <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">
   <div id=I>Меню</div></a>
   <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">
   <div id=I>Классическое</div></a>
   <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">
   <div id=I>Такое</div></a>
   </tr>
   </table>
   

   Только в блоке <div> Mozilla способен попасть в указанную величину пикселей, но на этом его злоключения не заканчиваются. Если не ограничить меню дополнительно (здесь ограничение за счет заключения его в таблицу), Mozilla делает интерактивной всю строку от левого края документа, до правого (неумение Mozilla работать с блоками проявляется не только в этом).

   Но не смотря на все сложности, порождаемые всякими Netscape и Mozilla, идущими своим путем, получаемый код не так уж велик и, при желании может быть сокращен. С учетом того что, обычная графическая кнопка занимает 2-3 килобайта, при десяти кнопках с 2 вариантами (активным и не активным), его применение позволит облегчить страницу килобайт на 60 (равносильно 4-ем тяжеловесным баннерам) и ускорить загрузку, для среднестатического соединения, на 30 секунд – и только за счет этих кнопок! При этом, следует учесть и то, что текст надежней рисунков: посетитель может отключить графику и если ссылки не написаны, а нарисованы, не узнать о их существовании и не найти способов навигации.

    

   Для того, чтобы кнопка-изображение быстрее реагировала на действие мыши, можно провести предварительную загрузку используемых в ней, но, изначально не отображаемых, рисунков. Для чего следует вставить в страницу примерно такой код:

   <SCRIPT LANGUAGE="JavaScript"><!--
   document.AltLogo1 = new Image();
   document.AltLogo1.src = "b2.gif";
   document.AltLogo2 = new Image();
   document.AltLogo2.src = "b3.gif";
   document.AltLogo3 = new Image();
   document.AltLogo3.src = "b4.gif";
   //--></SCRIPT>
   

   Этот код объявляет переменные (AltLogo1 – AltLogo3) для размещения рисунков оператором new и загружает их, установив их src. В результате, вид кнопки изменится быстрее, чем на этой странице, где предварительная загрузка умышленно не выполнена.

   А для большого числа нумерованных рисунков можно применить компактный цыкл:

   <SCRIPT LANGUAGE="JavaScript"><!--
   for(i=2;i<=4;i++) // Пока i=2 (первый предзагружаемый рисунок), не достигнет 4 (последний),
   // увеличивая его на единицу
   {
   eval('document.AltLogo' + i + '=new Image()');
   eval('document.AltLogo' + i + '.src="b' + i + '.gif"');
   }
   //--></SCRIPT>
   

   В случае браузеров не поддерживающих скрипты, можно предварительно загрузить рисунки, скрыв их наличие за счет атрибутов width=1 и height=1. Например:

   <IMG SRC="b2.gif" alt="" width=1 height=1 border=0>
   <IMG SRC="b3.gif" alt="" width=1 height=1 border=0>
   <IMG SRC="b4.gif" alt="" width=1 height=1 border=0>
   

   Однако, браузеры, не поддерживающие скрипты, обычно не поддерживают и рисунки, так что, их загрузка может не иметь смысла.

   Изменение вида обычной кнопки (сразу с учетом особенностей Mozilla).

   <style>
   .R3 input {background:Maroon;color:Yellow}
   .R3 input:hover {background:green}
   .R3 input:active {background:lime;color:Yellow}
   </style>
   

   Различия между просмотренными и обычными кнопками, можно задать, только если кнопка помещена в ссылку (A:visited input). Различия между активными, неактивными и накрытыми курсором кнопками работают в Mozilla и Опере. В IE, помещение кнопки в ссылку требуется и для этого. Фактически, чтобы все работало, как положено, во всех обозревателях, для кнопки должен быть определен и стиль, и события:

   <P class=R3><INPUT TYPE='SUBMIT' VALUE='Перейти' onClick="this.style.background='lime';
   window.location='MyFile.html';"  onmouseover="this.style.background='green';
   this.style.cursor='hand' "onmouseout="this.style.background='Maroon'">
   

   Переопределение курсора произойдет только в IE.

   Получаем (обычная ссылка и просмотренная ссылка, не в теге <A>):

   При одинаковых вариантах поведения описанных примеров ссылок, последний является наиболее громоздким. Облегчить его можно, поместив кнопку в настоящую ссылку. Тогда изменение вида не придется программировать на JavaScript, что сэкономит сотню байт на каждой кнопке. Вариант «для ленивых» оказался лучшим.

Навигационные карты

Навигационные карты представляют собой рисунок, внедряемый либо как <IMG>, либо как <OBJECT>, с регистрозависимым атрибутом USEMAP. Значение этого атрибута определяет имя используемой карты. Сама карта задается тегом <MAP> с соответствующим, регистрозависимым, атрибутом NAME и заканчивается заключительным тегом </map> (см. документацию по HTML 3.2 и HTML 4.0). Между начальным и заключительным тегом помещаются теги <AREA> (область), с обязательным указанием типа области shape и ее координат coords (вместо <AREA> допускается применение <A></A> с теми же атрибутами). Поскольку в браузере посетителя графика может быть отключена, разумно задание альтернативного текста для области (alt), отображение границы рисунка и задание его точного размера.

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

"DEFAULT": весь рисунок, координаты не обязательны.

"RECT": Прямоугольник, указывается координата верхнего левого и нижнего правого угла.

"CIRCLE": Круг, указывается координата центра и радиус круга.

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

Координаты для каждой точки задаются сначала по оси x, затем, по оси y, от левого верхнего угла рисунка. Определить ее можно в стандартной программе рисования Paint: при перемещении указателя мыши над рисунком, она отображается в строке состояния.

Реакция на действия пользователя происходит либо в соответствии с атрибутом HREF, либо по событию onclick. При этом обработчик анализирует определение областей, начиная с первой и, найдя нужную область, прекращает поиск. Поэтому, если какие-то из областей пересекаются, используется первое назначение для данного участка.

Пример карты:

<IMG SRC="map.gif" BORDER=1 width=303 height=146 USEMAP="#map1"> 
<MAP NAME="map1"> 
<AREA HREF="file1.html" ALT="Ссылки" SHAPE="RECT" COORDS="0, 0, 303, 25"> 
<AREA HREF="file2.html" ALT="Навигационные карты" SHAPE="RECT" COORDS="0, 26, 303, 49"> 
<AREA HREF="file3.html" ALT="Атрибуты ссылок" SHAPE="RECT" COORDS="0, 50, 303, 73"> 
<AREA HREF="file4.html" ALT="Фреймы" SHAPE="RECT" COORDS="0, 74, 303, 98"> 
<AREA HREF="file5.html" ALT="Различные команды" SHAPE="RECT" COORDS="0, 99, 303, 121"> 
<AREA HREF="file6.html" ALT="Окна" SHAPE="RECT" COORDS="0, 122, 303, 146"> 
</map>

Получаем:

Для такого простого примера применение навигационной карты врятли разумно. Но если представить себе метеосайт, на котором вместо текстовых ссылок на регионы страны, используется навигационная карта… Выглядеть будет довольно эффектно. Если же требуется сделать виртуальную клавиатуру, то навигационная карта становится единственным разумным решением.

Атрибуты ссылок

Наибольшее значение имеют несколько перечисленных ниже атрибутов. Они применяются, практически, каждым дизайнером.

HREF – адрес ссылки.

NAME – имя ссылки.

TITLE – всплывающая подсказка.

ACCESSKEY – клавиша доступа.

TARGET – целевой кадр. Определяет, будет ли загружен документ в текущее окно (target=_top), поверх данного документа, новое окно (target=_blank), или определенное окно фрейма (см. фреймы).

ONCLICK – по щелчку мыши назначить действие.

Существует огромное количество других, второстепенных атрибутов, ознакомиться с которыми можно в документации по HTML.

Фреймы (Frame)

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

_top – Вместо текущего документа, со всеми его кадрами.

_blank – В новом окне, не закрывая текущего.

_self – вместо текущего документа. Если он находится внутри фрейма, загружаемый документ так же помещается в данный кадр фрейма. Указание target=_self равносильно отсутствию указания target вообще.

_parent – вместо документа, являющегося родительским для текущего кадра (содержащего данный Frameset). Если никакого кадра нет, документ загружается вместо текущего документа.

Установив в определении фреймов имена (атрибут NAME) для кадров, можно из одного кадра загружать документы в другой. Например, target=Frame3. В скриптах это можно делать как parent.Frame3.location="file1.html". Так же можно использовать массив фреймов (эти технические подробности описаны в документации по JavaScript и их вряд-ли стоит повторять, в связи с редким использованием).

Большую информацию о фреймах можно получить на странице  Если вам не нравятся фреймы (frames), значит, вы не умеете их готовить

Различные команды, могущие использоваться в ссылках:

window.location – новое размещение документа для текущего окна

parent.location – новое размещение документа для родительского фрейма

self.parent.location – аналогично предыдущему, указывает новое размещение документа для родительского фрейма.

parent.Frame3.location – открывает документ в кадре под именем Frame3.

document.location – новое размещение документа для текущего окна.

history.back() – переход к предыдущему документу

scrollTo(0,0) – переход к координате (в данном случае, к началу документа).

Перед выполнением команды можно выдать запрос. Команда выполняется только при утвердительном ответе.

if(confirm('Перейти к myfile.html?')) window.location='myfile.html'

Аналогично, можно задать явный переход в ссылке, но осуществить его только по утвердительному ответу:

<A HREF="myfile.html" onClick="return window.confirm('Перейти?');">переход к myfile.html</A> 

Примеры ссылок использующих дополнительные атрибуты

<a href="appendd/comment.html" target=Frame3 onClick="document.location='appendd/metodic.html';">
Приложения</A>
<a href="appendd/metodic.html" onClick="parent.Frame3.location='appendd/comment.html';">
Приложения</A>
<a href="appendd/index.html" target=_top>Приложения</A>

Три перечисленные ссылки разными методами выполняют одно и то же действие:

Первая ссылка по щелчку мыши открывает скриптом файл оглавления (appendd/metodic.html) в том же фрейме, где находилась ссылка, а затем, в другом фрейме, открывает страницу appendd/comment.html, являющуюся, для набора документов, связанных с отпывшемся оглавлением, страницей по умолчанию.

Вторая ссылка, наоборот, сначала скриптом открывает страницу appendd/comment.html во фрейме "Frame3", а затем, в том же фрейме, где находилась ссылка, открывает файл оглавления.

Третья ссылка, не мудрствуя лукаво, вместо текущей страницы фреймов, открывает новую (appendd/index.html), для которой appendd/metodic.html и appendd/comment.html являются фреймами по умолчанию. Не смотря на то, что в данном примере, последний вариант является самым компактным и надежным, первые два тоже имеют право на жизнь, так как позволяют открыть в другом фрейме страницу, не являющуюся страницей по умолчанию.

Хотя и в нем можно было бы решить эту же задачу, добавив параметр, указывающий, какую страницу открыть:

<a href="appendd/index.html?другая_страница.html" target=_top>Приложения</A>

Нужно лишь встроить обработку запросов в файл appendd/index.html, для чего достаточно добавить в его заголовочную часть такую функцию:

<SCRIPT LANGUAGE="JavaScript"> <!-- 
function JS() {
    B=document.location.search ;
    if (B != "") parent.Frame3.location=B.substring(1) ;
}// --> </SCRIPT>

А в определение фреймов вставить ее вызов по событию OnLoad (подробней об этом смотрите на странице  Если вам не нравятся фреймы, значит вы не умеете их готовить).

Последний пример:

<a href="appendd/index.html" target=_blank>Приложения</A>

Простая ссылка, открывающая новый документ в новом окне, не закрывая текущего.

Окна

Помимо привычных полных окон, браузеры допускают открытие скриптами нескольких типов дополнительных окон. Для JavaScript фактически используется только три:

alert() – открыть окно сообщения. Например: alert('Привет с большого бодуна!'). Смотреть

confirm() – открыть окно запроса. Если пользователь ответил утвердительно, возвращается истинное значение, иначе возвращается ложное. Смотреть

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

Команды управления всплывающими окнами:

window.open("URL","window_name","param,param,...", replace)

где:

URL – адрес открываемого документа. Если адрес пустой, создается новый документ в оперативной памяти.

window_name – имя окна для использовании в атрибуте TARGET. Может быть пустым.

Replace – заменить последний адрес в истории адресом открываемого окна (не обязательно).

Param – список необязательных параметров, перечисленных через запятую.

Допустимые параметры:

Toolbar – наличие, или отсутствие панели инструментов. Может иметь значения yes или no, или аналогичные им 1 или 0.

Location – наличие или отсутствие адресной строки

Directories – в окне присутствует или отсутствует «избранное»

Status – наличие или отсутствие строки состояния

Menubar – наличие или отсутствие панели меню

Scrollbars – наличие или отсутствие полосы прокрутки

Resizable – разрешение или запрет изменения размеров

width – ширина в пикселях

height – высота в пикселях

top – координата верхнего угла по оси y, относительно рабочей области браузера

left – аналогично, координата по оси x.

Тем, кто совсем не знаком с программированием, следует запомнить что, для указания одного из атрибутов, необходимо указание всех предыдущих. Например, если мы хотим указать размеры открываемого окна, то обязаны указать его URL и имя, даже если они НАМ не нужны (в таком случае, между кавычками можно ничего не писать). Иначе размеры окна будут интерпретироваться как адрес (или имя, если адрес указан).

Если все параметры, кроме пути, опустить, окно откроется с параметрами текущего окна браузера. Если вместо прямого открытия, применить открытие в качестве параметров присвоения, например:

MyWindow=window.open("URL","window_name","param,param,...", replace)

Открытое окно получит идентификатор MyWindow, который можно использовать для обращения к нему в командах типа write или close.

Если использовать команду только с параметром URL:

window.open("URL")

откроется обычное новое окно, аналогичное ссылке

<a href="URL" target=_BLANK>Перейти</a>

Основные команды управления окнами.

close() – закрыть текущее окно.

window.close() – аналогично.

MyWindow.window.close() – закрыть окно с идентификатором MyWindow

MyWindow.window.focus() передать фокус окну с идентификатором MyWindow (переключиться на это окно).

window.opener.close() закрыть окно, из которого открылось текущее.

window.opener.document.bgColor='cyan' поменять задний план документа из которого открыто текущее окно.

MyWindow.document.bgColor='cyan' поменять задний план документа в окне с идентификатором MyWindow

Пример подобного (пустого) окна:

void window.open('','MyTarget',
'menubar=no,scrollbars=yes,resizable=yes,width=600,height=300,top=0,left=0');
// оператор void показывает системе что никаких других действий выполнять не требуется
// иначе в данном синтакчисе, после открытия окна, родительское окно попытается открыть пустую страницу.

Смотреть

Если назначить окну идентификатор:

WindowA=window.open('','MyTarget',
'menubar=no,scrollbars=yes,resizable=yes,width=600,height=300,top=0,left=0');

В него можно будет писать, пока оно открыто. Например следующий код помещает в это окно фразу «Привет!» и передает ему фокус:

WindowA.document.write('<html><body><h1>Привет!</h1>
</body></html>'); WindowA.window.focus();

Открыть пустое окно для записи

Внести надпись

А этот открывает в нем готовую страницу (и передает фокус):

<A HREF="links.html" TARGET="MyTarget" onClick="WindowA.window.focus();"
 title="Трафик минимальный, так как откроется уже загруженная страница">Заменить «Привет!»
 на готовую страницу</A>

Заменить «Привет!» на готовую страницу

Наиболее редким является окно запроса параметров. Оно вызывается методом prompt(Подсказка,Ответ по умолчанию);. Например:

a=prompt('Введите имя','Вася');

Выведет окно с сообщением «Введите имя», задав имя Вася как предпологаемый вариатн ответа. Затем поместит ответ пользователя в переменную а, если он нажал O`key или поместит в нее «null», если пользователь нажал отмену. Смотреть. Поскольку данным методом можно запросить только одну строку, метод prompt практически не применяется – на самой странице можно получить от посетителя гораздо больше строк через элементы input или textarea.

Особые окна IE

Особым случаем можно считать модальные и немодальные окна IE, открываемые командами showModalDialog и showModelessDialog. Поскольку они поддерживаются только Internet Explorer (первое с версии 4.0, второе с версии 5.0), их применение во многих случаях недопустимо, ведь пользователи других браузеров (например браузеров Linux), их не увидят. Однако эти окна обладают рядом полезных особенностей из-за чего, со временем, могут обрести поддержку в других браузерах, и достойны упоминания. Кроме того, о них стоит упомянуть еще и потому, что они мало известны. Но они есть!

window.showModalDialog("URL"[,разделенный запятыми массив значений][,"параметры окна через точку с запятой"]) – открывает окно модальное к текущему окну приложения. В это окно нельзя произвести запись командами document.write (и нет смысла открывать пустое окно) и его нельзя закрыть командой MyWindow.window.close(). С момента открытия окна, выполнение скрипта приостанавливантся до тех пор, пока оно не закроется, а после закрытия, окно с данным идентификотором больше не существует. Так же, нельзя управлять поведением родительского окна из открытого им модального, так как любые операции над родителем блокированы – его нельзя даже прокрутить. Передача команд модальному окну возможна только через масив значений, определяемых в команде его открытия, а реакция на события в модальном окне – только через анализ возвращаемых при его закрытии значений. Наиболее подходящей областью применения модальных окон является замена окна PROMPT. В отличае от окна prompt, модальное окно является необычно открытой, обычной web-страницей; может содержать графику тексты и различные поля ввода, а так же принимать и возвращать большое количество параметров. Оно вполне подходит для заполнения регистрационных форм. Если при его открытии, ему назначить идентификатор типа:

MyWindow=window.showModalDialog('links.html','','dialogHeight:200px;dialogWidth:300px;
 help=no; status=no'); 

А в самом окне установить возвращаемое значение командой

window.returnValue=Первое_значение, вторе, третье ...;

То после закрытия модального окна, в окне его породившим можно принять масив этих значений для обработки:

result0=MyWindow[0];
result1=MyWindow[1];
result2=MyWindow[2];

window.showModelessDialog("URL"[,разделенный запятыми массив значений][,"параметры окна через точку с запятой"]) – Открывает немодальное окно, которое ведет себя почти как окно, открываемое командой window.open. Единственное отличие заключается в том что, в качестве параметров оно может получать данные для обработки и в том, что оно остается верхним, даже если не активно. Последнее отличие позволяет управлять поведением родительского окна и создавать в немодальном окне Internet Explorer меню навигации (с помощью Internet Explorer посмотрите на прайс, использующий немодальное окно в качестве элемента управления).

Для обоих окон (модального и немодального) результирующим окном для загрузки ссылок является новое окно (даже для команд document.location=).

Параметры для модального и немодального окна:

dialogHeight: – высота в пикселях или em (минимальная и максимальная величины ограничены).

dialogWidth: – ширина в пикселях или em (минимальная и максимальная величины ограничены).

help= – если no, то в строке заголовка не должна отображаться кнопка вызова справки, иначе справка отображается.

status= – если yes отображается строка состояния. Значение по умолчанию различно для версий браузера

center= – если no, то окно не будет центрироваться по экрану, иначе центрируется, если координаты не заданы явно.

dialogHide= – если yes окно скрывается при печати и предварительном просмотре, иначе нет.

dialogLeft: – горизонтальная координата левого верхнего угла в пикселях или em.

dialogTop: – вертикальная координата левого верхнего угла в пикселях или em.

edge= – если sunken граница вдавлена, иначе raised – выдавлена.

resizable= – если yes – размеры можно изменить, иначе изменение размера пользователю недоступно.

scroll= – если no, полосы прокрутки не отображаются, даже если страница не вмещается в окно, иначе отображаются и пользователю доступна прокрутка.

Как модальное, так и не модальное окно могут иметь доступ к свойствам открывшего их окна. Для этого, в качестве параметров вызова они должны получить идентификатор window:

MyWindow=window.showModelessDialog('links.html',window,'dialogHeight:60px;
dialogWidth:300px; help=no; status=no;dialogLeft:0;dialogTop:0');

Который в тексте открываемой страницы, с помощью функции dialogArguments, можно передать переменной, а через нее, обращаться ко всем свойствам открывшего окна:

ParentWindow=window.dialogArguments;
ParentWindow.document.all.tags("h1")[0].innerText='Новый заголовок';
 // Меняем первый заголовой породившей страницы
ParentWindow.document.location='menus.html' ;
 // Загружаем в породившее окно новый документ

С другой стороны, родительские окна, могут получить доступ к порожденным не модальным окнам через их идентификатор (как в команде window.open):

MyWindow.document.all.tags("h1")[0].innerText='Новый заголовок';
 // Меняем первый заголовой порожденной страницы

Не менее важным, как и в команде window.open, является возможность определить закрыто ли окно:

if (VarWindow) // Если окно открывалось
if (VarWindow.closed != true) // Если оно открыто в текущий момент

Что дальше?

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

 

 

Комментарии к странице (всего 2)

 

 

 

---

На главную страницу сайта