DHTML0125

DHTML0125



Rozdział 7.

Przycinanie elementu



Przycinanie elementu

W odróżnieniu od określania właściwości width i heighł, które kontrolują wymiary elementu,

przycinanie określa, jaka część elementu będzie w rzeczywistości widoczna na ekranie. Reszta elementu cały czas będzie umieszczona na stronie, jednak będzie niewidoczna dla osób oglądających ją i traktowana przez przeglądarkę jako pusty obszar. Na rysunku 7.8 pierwszy obrazek został wyświetlony w całości, natomiast drugi jest przycięty.

Aby określić

przycięty obszar elementu

1.    polNpol {

Rozpocznij regułę podając selektor i otwierający nawias klamrowy. W tym przykładzie stworzona została klasa polNpol, którą będzie można wykorzystać w dowolnym znaczniku HTML-owym.

2.    position: relative;

Określ położenie elementu, bądź to jako względne, bądź jako bezwzględne.

3.    clip:

Zapisz właściwość clip i dwukropek.

4.    rect(80 70)

Teraz zapisz rect, aby zdefiniować, że przycinany obszar będzie miał kształt kwadratu, Następnie zapisz nawias otwierający, dwie wartości oddzielone od siebie spacją i nawias zamykający. (Pierwsza podana w nawiasie wartość będzie określała szerokość obszaru, jaki będzie widoczny, natomiast druga - jego wysokość.) Obie wartości mogą być wielkościami określającymi długość lub słowem kluczowym auto, którego wykorzystanie sprawi, że wielkość przycinanego obszaru określi przeglądarka (zazwyczaj będzie to 100%).

5.    ;}

Zakończ regułę podając średnik i zamykający nawias klamrowy }.

Listing 7.8. W Navigcitorze znacznik akapitu zostanie przycięty do szerokości 80 i wysokości 70 pikseli. Navigator ma problemy

: wykoriystywaniem stylów bezpośrednio

w znaczniku obraz ka (<IUG>), dlatego też w tym przykładzie został on zagnieżdżony w akapicie

<html>

<head>

<meta http-equi'v-wContenr-TypeM -*content=Mtext/htinl; charser_=IS0-8859-2"> <title>Listing 7.8</title>

<style type="text/css">

.polNpol { position: relative; clip: ->rect( 80 70 ) ; }

</style>

</head>

cbody bgcolor="#FFFFFFH>

<IMG SRC=” . ./.i ma ges/rysi .gif” width=*"150" height. ■" 126" align="left">

<p class="polNpol">

<IMG SRC-"../images/rysl .gif'' width=”150M height"”126" aiign«"left" >

</p>

</body>

</html>

E>le Ed* yisw Cpinnry/^toi y&fc

' di. / 3 :>'» ^ -i m

6*d    R*smo Hotn* Sctarch Gucte Ptiol Seanły S JMHi

i    '    -M.ąpya z

Rysunek 7.8. Pierwsza wersja obrazka w ogóle nie jest obcięta, wersja druga jest przycięta w połowie szerokości i wysokości

128


Wyszukiwarka

Podobne podstrony:
DHTML0111 Rozdział 6.Informowanie elementu • nonę, które spowoduje, że w przeglądarkach CSS element
DHTML0119 Rozdział 7. Dodawanie elementówDodawanie elementów bezwzględnych do
DHTML0082 Rozdział 5. Czasami powtarzające si
DHTML0007 Spis treści Określanie górnego i dolnego marginesu    126 Przycinanie eleme
DHTML0089 Rozdział 6.Pojęcie bloku elementu Określenie element jest używane do odwoływania się do ró
DHTML0091 Rozdział 6. Określanie marginesów elementuOkreślanie marginesów elementu Właściwość margin
DHTML0095 Rozdział 6. Określanie wypełnieniaOkreślanie wypełnienia wokół elementu Na pierwszy rzut o
Koronki diamentowe impregnowane, w odróżnieniu od ziarnistych, posiadają pył diamentowy jako element
Elementy teletransmisji danych określona częstotliwość nośna dla zera i jedynki, poczynając od warto
DHTML0117 Rozdział 7. Rozdział 7. Stosowanie umiejscawianiaStosowanie umiejscawiania względnego Elem
DHTML0127 Rozdział 7. Definiowanie porządku wyświetlaniaDefiniowanie porządku wyświetlania Różne ele
Kim jest nauczyciel w odróżnieniu od pozostałych elementów środowiska wychowania ‘Nauczyciel: •
76240 slaga15 Sz. W. Slaga [28] w celu odróżnienia na tym poziomie organizacji materii elementów mar
Acddentulia negotii(elementy dodatkowe) —    w odróżnieniu od naturalni negorii
Foto2954 154 Rozdział 22.2. Elementy topografii i terenoznawstwa Ludzie od dawna starali się stworzy
51002 Skanuj 3 Automatyzm serca □ w układzie bodźcoprzewodzącym trudno jest w zasadzie rozdzielić el

więcej podobnych podstron