Efektowne odsłanianie/zasłanianie bloków z wykorzystaniem clipBy()
(przykład 3.3)







( spis treści )

Atrybut clip w Netscape Navigatorze

Navigator pozwala bezpośrednio odwoływać się do każdej z czterech składowych atrybutu clip:
  document.layers['nazwaBloku'].clip.top
  document.layers['nazwaBloku'].clip.right
  document.layers['nazwaBloku'].clip.bottom
  document.layers['nazwaBloku'].clip.left
Możemy odczytywać lub zmieniać wartości tych atrybutów, zmiany są widoczne natychmiast w oknie przeglądarki.

Modyfikacja atrybutu clip w NN wygląda następująco:
  document.layers['nazwaBloku'].clip.krawędź = nowa_wartość;


poprzednia strona || następna strona

Atrybut clip w Internet Explorerze

Explorer trzyma wszystkie składowe clip razem, co oznacza, że nie można zmienić tylko jednej składowej:
  document.all['nazwaBloku'].style.clip
Wartością atrybutu clip jest ciąg znaków (string) postaci:
  "rect(0px 100px 50px 0px)"
- czyli podobny do deklaracji z arkusza stylów. Jedyna różnica to dodanie przez przeglądarkę "px" do każdego z argumentów. Aby zmodyfikować clip, należy zbudować ciąg znaków o zadanej postaci i przypisać go do atrybutu:
  document.all['nazwaBloku'].style.clip =
"rect(" + top + " " + right + " " + bottom + " " + left + ")";
poprzednia strona || następna strona

Funkcja clipTo()

function clipTo(ident, t, r, b, l) {
  if(nn4) {
    document.layers[ident].clip.top = t;
    document.layers[ident].clip.right = r;
    document.layers[ident].clip.bottom = b;
    document.layers[ident].clip.left = l;
  } else if(ie4) {
    document.all[ident].style.clip = 
        "rect(" + t + " " + r + " " + b + " " + l + ")";
  }
}

poprzednia strona || następna strona

Funkcja clipBy()

function clipBy(ident, t, r, b, l) {
  if(nn4) {
    document.layers[ident].clip.top += t;
    document.layers[ident].clip.right += r;
    document.layers[ident].clip.bottom += b;
    document.layers[ident].clip.left += l;
  } else if(ie4) {
    ie_clip = document.all[ident].style.clip;
    ie_clip = ie_clip.substring(5, ie_clip.length-1);
    ie_wart = ie_clip.split("px");

    t += parseInt( ie_wart[0] );
    r += parseInt( ie_wart[1] );
    b += parseInt( ie_wart[2] );
    l += parseInt( ie_wart[3] );

    document.all[ident].style.clip = 
        "rect(" + t + " " + r + " " + b + " " + l + ")";
  }
}
poprzednia strona || następna strona