Прием HTML Javascript показать спрятать слой.

Спрятать/показать слой.

В Internet Explorer (IE) cлои описываются с помощью тега <div>содержание слоя</div>
Пример: создадим невидимый слой (на невидимость указывает visibility:hidden, в противном случае visibility:visible)

<div id="buttonhighlight" style="position:absolute; width:10; height:10;
z-index:1; visibility:hidden">
  <a href="somedoc.htm">
    <img src="button_highlight.gif">
  </a>
</div>

Таким образом мы создали невимимый (hidden) слой размера 10x10 пикселей, в котором расположена ссылка на somedoc.htm в виде картинки button_highlight.gif. Слои с большим значением параметра z-index распологаются поверх слоев с меньшим значением этого параметра.

Отлично. Теперь надо научиться делать этот слой видимым.
Пример: напишем функции "показать" (showlayer) и "спрятять" (hidelayer) слой на языке JavaScript.

<script language="JavaScript1.2">
  var layerRef="null", styleSwitch="null";
  if (navigator.appName == "Netscape"){
    layerRef="document.layers";   styleSwitch="";}else{layerRef="document.all";
    styleSwitch=".style";}
  function hidelayer(layerName){
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');}
  function showlayer(layerName){
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');}
</script>

Этот скрипт учитывает какой у Вас браузер Internet Explorer или Netscape Navigator. Только для Internet Explorer'а этот скрипт будет выглядеть значительно проще:

<script language="JavaScript1.2">
  function hidelayer(layerName){
    eval('document.all'+'["'+layerName+'"]'+'.style.visibility="hidden"');}
  function showlayer(layerName){
    eval('document.all'+'["'+layerName+'"]'+'.style.visibility="visible"');}
</script>

Вам надо будет вставить этот код в тело вашей страницы т.е. в контейнер <body>вставить код сюда, дальше идет тело Вашей страницы</body>

Далее применим вышеполученное для создания кнопки с подсветкой. Для этого надо использовать события onmouseover и onmouseout. Создадим таблицу с одной строкой и одним столбцом, которая, собственно, и будет являтся кнопкой (вместо таблицы можно использовать и другие объекты, например обычную картинку <img src="..." onmouseover="..." onmouseout="...">). Внутри таблицы солздаем спрятанный (hidden) слой с названием 'samplebuttonhl'. В этом слое создаем ссылку на страницу somedoc.htm, она и будет открыватся при нажатии на кнопку. После создания слоя, в самой таблице пишем Sample button - это надпись на кнопке. В описании тега таблицы используем onmouseover="..." onmouseout="...", таким образи мы определяем действия по событиям наведения мышки на кнопку и уведения мышки с кнопки.

В итоге у нас получится:

<table border="1" cellspacing="0" cellpadding="0" 
onmouseover="showlayer('samplebuttonhl');" onmouseout="hidelayer('samplebuttonhl');">
  <tr>
    <td>
      <div id="samplebuttonhl" style="position:absolute;
      z-index:1; visibility:hidden; background-color:#808080;">
        <a href="somedoc.htm">Sample button</a>
      </div>
      Sample button
    </td>
  </tr>
</table>

Выглядеть эта кнопка будет так:

Sample button

Вернутся к Приемам HTML

Home (на главную)

htmljava.narod.ru