9. Шари

Що таке шар?
      З допомогою шарів точно розташовують зображення, пересувають об'єкти по сторінці або роблять їх невидимими.
      Пояснимо концепцію шару такою аналогією: беремо кілька аркушів паперу. На кожному з них пишемо текст, креслимо рисунки або малюємо (фарбами) малюнки. Кладемо аркуші на стіл, один на один, вирівнюючи краї. Так і шари накладають один на один, як аркуші паперу на столі. У кожному шарі можуть бути прозорі ділянки, аналогічні вирізаним ділянкам на аркуші паперу, через які видно шар, розташований нижче.

 Створення шару
      Розглянемо приклад створення шарів для запису тексту літерами з тінню.

Два шари
Два шари

      Буде використано тег <div> (англ. division — розділення) — тег-контейнер для виділення (логічного) блоку — у поєднанні з каскадними таблицями стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальною мовою, яку використовують для відображення сторінок, написаних мовами розмітки даних. Специфікації CSS було створено й розвинуто Консорціумом Всесвітньої мережі. CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації.
      Код поданого прикладу з двома шарами має такий вигляд:

  
<style type="text/css">
 #layer1, #layer2 { position: relative;/* Відносне позиціонування */
                  } 
 #layer1 { font-size: 50px; /* Размер шрифту */
               color: lime; /* Салатовий колір тексту */
             z-index: 2;
         }
 #layer2 { font-size: 50px; /* Розмір шрифту */
               color: green;/* Зелений колір тіні */
             z-index: 1; 
                 top: -55px;/* Зсув тексту вгору */
                left: 2px;  /* Зсув тексту праворуч */
         }
</style>
<div id="layer1">Два шари</div>
<div id="layer2">Два шари</div>

      Назви властивостей і навіть назви їхніх величин (англійською мовою) дуже прозорі.
      Властивість position може набувати таких величин: absolute, fixed або relative.
      Щодо властивості z-index, то зауважимо таке. Множина значень вичерпується такими трьома випадками: ціле число, auto й inherit. Згідно із замовчуванням, властивість z-index набуває величини auto. У цьому випадку порядок елементів визначається згідно з їхнім розташуванням у коді HTML і приналежністю до предка, бо нащадки мають той самий номер, що і їхні предки. Величина inherit вказує на наслідування властивості від предка. Також z-index може бути цілим числом. Чим більше це число, тим вище розташовано елемент. У проглядачі FireFox до версії 2.0 включно від'ємна величина z-index розташовує елемент нижче тла веб-сторінки та її вмісту. Opera не підтримує величини z-index більші, ніж 65536 = 216.
      Розглянемо приклад трьох шарів різного кольору.

Код поданого прикладу має такий вигляд:
<html><body>
<style type="text/css">
#block{margin:5px 0; position:relative; height:150px}
#one{   color: green;
   visibility: show;
      padding: 10px;
   background: yellow;
        width: 100px;
       height: 50px;
     position: absolute;
         left: 0px;
          top: 20px;
      z-index: 1;
    }
#two{ color: blue;
 visibility: show;
    padding: 0px;
 background: red;
      width: 200px;
     height: 50px;
   position: absolute;
       left: 50px;
        top: 30px;
    z-index: 4;
    }
#three{color: brown;
  visibility: show;
     padding: 10px;
  background: lime;
       width: 100px;
      height: 100px;
    position: absolute;
        left: 100px;
         top: 30px;
     z-index: 2;
       }
</style>
Текст перед блоком трьох шарів<B>
<div id="block">
<div id="one">  Перший блок<BR><BR><BR><BR><BR><BR><BR><BR> Перший блок</p>
<div id="two">  Другий блок Другий блок<BR><BR><BR> Другий блок</div></div>
<div id="three">Третій блок</div></div></B>
Текст після блоку трьох шарів
</body></html>

      Зауважимо, що альтернативною до show величиною властивості visibility є hidden. У цьому випадку шар є невидимим.
      Щоб пояснити, як отримане розташування шарів узгоджено із відомостями щодо z-index, зауважимо: шар two вкладено у шар one. Величина 4 впливає лише на розташування шару two серед шарів, вкладених в шар one.
      Розглянемо приклади блоків по два шари. В одному блоці розташуємо малюнок під текстом, в іншому — навпаки.

Текст Текст


Текст Текст
 Код для отримання такого зображення має такий вигляд:
<style type="text/css">
#blo{margin:5px 0; position:relative; height:120px}
#four{  color: lime;
   visibility: visible;
      padding: px;
        width: 160px;
       height: 120px;
     position: absolute;
         left: 0px;
          top: 0px;
      z-index: 1;
    }
#five{color: lime;
 visibility: visible;
    padding: 0px;
      width: 160px;
     height: 120x;
   position: absolute;
       left: 0px;
        top: 0px;
    z-index: 2;
    }
</style><B>
<div id="blo">
<div id="four"> <img src=img.gif>
<div id="five"> <font size=+5>Текст Текст</font></div></div></div><BR><BR>
<div id="blo">
<div id="four"> <font size=+5>Текст Текст</font></div>
<div id="five"> <img src=img.gif></div></div></B>

      Зауважимо, що у другому випадку — текст під малюнком — текст видно лише тому, що при створенні малюнку використано прозоре тло. Саме це зроблено у поданому прикладі. Обидва елементи видимі, бо їхня властивість visibility має величину
visible — видимий (згідно із замовчуванням) — на відміну від:
hidden — невидимий, але займає місце;
collapse — для таблиць вилучає рядки або стовпчики, таблицю перебудовує, місця невидимих елементів займають інші елементи (дія для інших елементів така сама, як при hidden);
inherit — успадкування від предка (батьківського елемента).

Шари і JavaScript
      Розглянемо, як отримати доступ до шарів мовою JavaScript на прикладі зміни видимості зображення геометричних фігур, розташованих поверх тексту.
     

Текст Текст
Код має такий вигляд.
...
<style type="text/css">
#bl{margin:5px 0; position:relative; height:120px}
#six{  color: lime;
       padding: 0px;
        width: 160px;
       height: 120px;
     position: absolute;
         left: 0px;
          top: 0px;
      z-index: 1;
    }
#seven{color: lime;
  visibility: hidden;
     padding: 0px;
      width: 160px;
     height: 120x;
   position: absolute;
       left: 0px;
        top: 0px;
    z-index: 2;
      }
</style>
<script language="JavaScript">
...
function ShowHide() {
  if  (document.getElementById("seven").style.visibility == "visible")
       document.getElementById("seven").style.visibility = "hidden"
  else document.getElementById("seven").style.visibility = "visible";
}
</script>
...
<div id="bl">
<div id="six"><B><font size=+5>Текст Текст</font></B></div>
<div id="seven"> <img src=img.gif></div></div></B>
...

      Таким чином, доступ до властивості здійснюють таким чином:

document.getElementById("назва елемента").style.назва властивості елемента

Переміщення
      Властивості left і top визначають розташування, задаючи відстані від лівого та верхнього країв вікна. Змінюючи їх, можна пересувати блоки. Покажемо це на прикладі рухомої моделі Птолемея, у якій рух небесних тіл здійснюється в одній площині. При цьому:

      Для поданої далі моделі радіуси обертання утворюють спадну геометричну прогресію з коефіцієнтом 1/2. Для справжньої моделі Птолемея радіуси обертання вибиралися з метою найточнішого опису видимого із Землі руху планет. Для сучасного математика не дивно, що таким чином вдалося доволі точно описати такий рух. Дивно, як давні греки додумалися до подання періодичних функцій рядами Фур'є (у моделі Птолемея — до третього члена).

Код поданого прикладу має такий вигляд.
<html><head> 
<style> 
own {position:absolute; left:-9; top:-9; width:0; height:0; visibility:'visible'} 
</style> 
<script> 
var  x0 // поточна абсциса  шару layer0
var  x1 // поточна абсциса  шару layer1
var  x2 // поточна абсциса  шару layer2
var  x3 // поточна абсциса  шару layer3
var  x0 // поточна абсциса  шару layer0
var  y1 // поточна ортината шару layer1
var  y2 // поточна ортината шару layer2
var  y3 // поточна ортината шару layer3
var t   // параметр-час

function init () // встановлення початкових параметрів
{layer0.style.left=250
 layer0.style.top =250
 layer1.style.left=450
 layer1.style.top =250
 layer2.style.left=550
 layer2.style.top =250
 layer3.style.left=600
 layer3.style.top =250
 t=0  
} 
// Переміщення 
function succ() 
{t+=1
 x0=200+50
 y0=200+50
 x1=x0+Math.cos(t/20)*200+50 
 y1=y0+Math.sin(t/20)*200+50
 x2=x1+Math.cos(2*t/20)*100
 y2=y1+Math.sin(2*t/20)*100 
 x3=x2+Math.cos(3*t/20)*50
 y3=y2+Math.sin(3*t/20)*50 
 layer0.style.left=x0 
 layer0.style.top =y0
 layer1.style.left=x1 
 layer1.style.top =y1
 layer2.style.left=x2 
 layer2.style.top =y2  
 layer3.style.left=x3 
 layer3.style.top =y3  
 setTimeout("succ();",75) 
} 
</script> 
</head> 
<body onload="init()"> 
<form name="form1"> 
<input type="button" value="Почати рух" onClick="succ()"> 
<input type="button" value="На початок" onClick="init()"> 
</form> 
<own id="layer0"><font size=+3 color=brown>•</font></own> 
<own id="layer1"><font size=+3 color=blue>•</font></own>
<own id="layer2"><font size=+3 color=red>•</font></own>  
<own id="layer3"><font size=+3 color=lime>•<font></own> 
</body></html>

Вмикання видимості
      Натисніть наступну клавішу для перегляду прикладу вмикання видимості шарів.

Код поданого прикладу має такий вигляд.
<html><head>
<STYLE type="text/css">
div {position: absolute; 
          top: 20; 
         left: 160;
   visibility: hidden;
    }
</STYLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function show_div(d)
{ div1.style.visibility='hidden';
  div2.style.visibility='hidden';
  div3.style.visibility='hidden';
     d.style.visibility='visible';
}                        //-->
</SCRIPT></head>
<body>
<a href="javascript:void(0)" onClick="show_div(div1);">показати шар 1</a><br>
<a href="javascript:void(0)" onClick="show_div(div2);">показати шар 2</a><br>
<a href="javascript:void(0)" onClick="show_div(div3);">показати шар 3</a>
<div id="div1"><font color=red>   Перший шар містить текст червоного кольору</font></div>
<div id="div2"><font color=green> Другий шар містить текст зеленого  кольору</font></div>
<div id="div3"><font color=blue>  Третій шар містить текст синього   кольору</font></div>
</body></html>

Керування видимістю частини зображення
      Натисніть кнопку, щоб спостерігати за виведенням лише частини зображення, яка (часнина) збільшується від центру до країв.

      Останній приклад отримано за допомогою такого коду.

<HTML><HEAD> 
<TITLE>Зміна видимої частини</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var w // ширина зображення
var h // висота зображення
var mx // половина w
var my // половина h
var p; // крок зростання розмірів видимої частини
var d= document 

function init() // визначення початкових параметрів 
{w = d.all["l1"].document.mypict.width 
 h = d.all["l1"].document.mypict.height 
 mx=Math.round(w/2) 
 my=Math.round(h/2) 
 p=0 
} 

function anim () // розкриття зображення від центру до країв 
{ p += 3 
  var t=d.all["l1"].style 
  mpym = my-p 
  mpyp = my+p 
  mpxm = mx-p 
  mpxp = mx+p 
  t.clip=eval('"rect("+mpym+" "+mpxp+" "+mpyp+" "+ mpxm+")"') 
  if ( !((p > mx) && (p > my))) 
   setTimeout("anim()",100) 
} 
//--></SCRIPT></HEAD> 
<BODY> 
<FORM><input type="button" value=Показати onClick="init(); anim()"></FORM>
<div id="l1" 
STYLE="position: absolute; overflow: hidden;  visibility: visible;"> 
<img id="pic" name="mypict" src="image.png"> 
</div></BODY></HTML>

Керування прозорістю
      W3C у рекомендації CSS3 означає властивість opacity для застосування ефекту прозорості до елементів сторінки. Така властивість набуває величин у межах від 0 до 1 (десятковий дріб). При величині 0 елемент стає повністю прозорим, а при величині 1 абсолютно непрозорим. Таку властивість можна застосовувати щодо будь-яких елементів сторінки. На жаль, різні проглядачі використовують по різному таку властивість. Тому для однакового ефекту потрібно передбачити у коді програми використання різних проглядачів і навіть їхніх версій. Радимо скористатися наявним у глобальній мережі прикладом розв'язання цієї проблеми, поданим бібліотекою http://www.tigir.com/js/opacity.js. Натисніть наступну клавішу для перегляду прикладу зміни прозорості шару при наведенні курсора миші.

      Цей приклад отримано за допомогою такого коду.

<html><head><title>Зміна прозорості при наведенні курсору миші</title>
<!-- Встановлення початкової прозорості -->
<style type="text/css">
  img{  filter:alpha(opacity=0);
        -moz-opacity: 0.2;
      -khtml-opacity: 0.2;
             opacity: 0.2;
      }
</style>
<!-- Підключення локальної копії бібліотеки -->
<script type="text/javascript" 
src="opacity.js"> //
</script>

<script type="text/javascript">
// Створення правила зміни прозорості:

fadeOpacity.addRule('oR1',  // назва
                       .2,  // початкова прозорість
                        1,  // кінцева прозорість
                      100); // параметр затримки
</script></head>
<body>
<img id="fImg1"
onMouseOver="fadeOpacity(this.id, 'oR1')"
 onMouseOut="fadeOpacity.back(this.id)"
        src="img.gif"/>
</body></html>

      Для миттєвої зміни прозорості на повну можна скористатися псевдо-селектором :hover, який дозволяє визначити стиль для елемента у момент наведення на нього курсора миші, як це зроблено для наступного зображення

за допомогою такого коду:
...
<style type="text/css">
a:hover img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
              -moz-opacity: 0.4;
            -khtml-opacity: 0.4;
                   opacity: 0.4;
            }
</style>
<a href="javascript:void(0)"><img src="img.gif"></a>
...

      Зображення розташовано всередині тега <a>...</a>, бо Internet Explorer до версії 6 включно сприймає :hover лише таким чином. Для пізніших версій цей недолік виправлено.

[попереднє] [зміст] [наступне]