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