Webdesign 101 » Dynamisk HTML » Clip-egenskaben

Clip-egenskaben

Artiklen beskriver en egenskab ved et HTML-element, der hedder clip. Denne egenskab gør det muligt at beskære et element fra flere sider. Det kan bruges til nogle tiltalende dynamiske effekter.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 

Kasse 1

 

Kasse 2

Den dybrøde kasse længst til venstre er et HTML-element, defineret ved sine egenskaber i et stylesheet, der ser ud som du ser lidt længere nede på siden.

Det, der er interessant ved dette stylesheet, er den sidste linie. Denne linie definerer en absolut positioneret kasses clipping-egenskaber. Clipping kan bedst oversættes til "beskæring", for det er det, du bestemmer via denne egenskab.

Det, der står i stylesheet'et, er at den røde kasse skal rummes i det samme rektangel, som det, der definerer kassens bredde og højde. Kassen beskæres nemlig med nul på alle kanter.

#box {
  position:absolute;
  left:25px;
  top:25px;
  width:150px;
  height:150px;
  background:maroon;
  color:white;
  text-align:center;
  clip:rect(0px 150px 150px 0px;)
}

Til højre for kasse 1 ser du kasse 2, der syner mindre. Det er den også, men kassens mål er de samme som kasse 1. Imidlertid ser den sidste linie i stylesheet for kasse 2 ud som følger:

clip:rect(10px 140px 140px 10px;)

Jeg beskærer altså kassen ved at definere et nyt rektangel med nogle mål, der relaterer sig til kassens egentlige mål: Mit beskæringsrektangel går fra 10 pixel fra kassens egentlige overkant til 140 pixel fra kassens egentlige overkant, hvis du ser på den lodrette led, og 10 pixel fra kassens venstre kant til 140 pixel fra kassens venstre kant, hvis du ser på den vandrette led.

Det er om at holde tungen lige i munden her og huske på, at skal du sætte flere værdier for en kasse i et stylesheet, er rækkefølgen altid: top, right, bottom, left - altså top, højre, bund, venstre, eller som jeg siger "med uret fra klokken 12".

Jeg har altså defineret en kasse der skal være 150 pixel gange 150 pixel, men beskærer den, så læseren kun kan se en kasse, der er 130 gange 130 pixel.

Læg mærke til, at det jeg har skåret væk er helt væk. Du kan se teksten i containerboksen i stedet for de bortskårne kanter.

Det kan vi bruge til noget. På næste side viser jeg hvordan, men inden vi gør det, skal vi først lige finde ud af, hvordan vi ved hjælp af JavaScript kan manipulere med clipping-værdierne. Det er ikke helt ligetil.

Mit mål med denne øvelse er at lave en universalfunktion, der skal se ud som følger:

clipTil(objekt, t, r, b, l)

Kasse 3

- altså en funktion, der som parametre modtager 1) hvilket element (repræsenteret ved dets ID), der skal beskæres, efterfulgt af 2) beskæringsrektangelets mål i samme orden som de er defineret - det vil sige top, right, bottom, left.

For ikke at gøre nogen lang snak ud af det, gengiver jeg funktionen herunder:

function clipTil(objekt,t,r,b,l){
var blok = findObjekt(objekt);
	blok.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}

Gør kassen mindre

Linket herover er et funktionskald til min beskæringsfunktion:

<a href="javascript:clipTil('box3',10,140,140,10)">
Gør kassen mindre</a>

Jeg har ikke selv rigtig kunnet finde på noget at bruge denne funktion til, men her er den altså, nu er den en del af DHTML-modulbiblioteket.

Jeg har imidertid en videre ambition, som jeg løfter lidt af sløret for på næste side - Ændring af CLIP-egenskaben.

1 2 3 4 5 6 7 8 9

Oprettet: 17. januar 2003
Senest opdateret: 21. maj 2003

CLIP-egenskaben

Retur til DHTML-sektionen
CLIP-egenskaben
Ændring af CLIP-egenskaben
Praktisk brug af CLIP

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.