|
9. lecke - Játék a képekkel, hirdető doboz
2008.02.05. 14:05
|
9. lecke
Játék képekkel - hirdető doboz |
|
Az előző leckében megtanultuk, hogyan lehet a MARQUEE
utasítás segítségével mozgó szövegeket elhelyezni weboldalunkon. Maradjunk
még egy kicsit ennél az utasításnál és nézzük meg, hogyan használhatjuk
képek - pl. buttonok, bannerek - mozgatására.
A példánkban azt
szeretném, ha a hirdetődobozban elhelyezett képekre klikkelve, egy link
segítségével a kép eredeti méretében jelenne meg. Természetesen pl.
buttonok vagy bannerek esetében a klikkelésre az adott oldal URL címét
kell megadni link-ként.
Lássuk a példát:
Kód:
 Jól
látszik, hogy itt is egymásba ágyazott utasításokkal dolgozunk. A
rózsaszínnel jelölt MARQUEE utasításba ágyaztuk a kékkel jelölt szöveges
és a sárgával jelölt link ill. kép részt megjelenítő utasításokat.
Vegyük sorra, mi mit jelent:
| |
|
MARQUEE utasításban
(rózsaszín rész) |
Az előző leckéből már ismert paraméterekkel egy 2
pixel szegélyvastagságú, zöld színű (#008000) pontozott vonallal
határolt (dashed), 160 pixel szélességű, 120 pixel magasságú dobozt
hoztunk létre. A doboz háttérszínét most nem színként, hanem
háttérképpel határoztuk meg a background-image:url('.....')
paraméterrel.
A pontozott rész helyére a te képed URL címét kell írni. Ha nem akarsz
háttérképet, akkor ezt a paramétert egyszerűen elhagyhatod, ilyenkor a
doboz "átlátszó" lesz. |
| |
|
P ill FONT utasításban
(kék rész) |
A dobozban lévő szöveg tulajdonságait adjuk meg.
Középre igazított (align="center"), 12 pixeles (size=3), sárga (color="yellow")
betükkel írunk. A szöveget a STRONG utasítással tesszük
félkövérré. A 2 db BR utasítás 2 soremelést jelent. |
| |
|
A ill. IMG utasításban
(sárga rész) |
Ezt a részt annyiszor ismételjük, ahány képet akarunk
elhelyezni a dobozban. A példánkban 4x.
A link klikkelésre új ablakban nyílik meg (target="_blank")
A href="...." paraméterben a pontok helyére az eredeti méretű kép URL
címét kell írni. (Button vagy banner esetében a megnyitni kívánt
weboldal URL címe.)
Ezután az IMG parancsban az src="....." paraméterben a pontok helyére
a pici kép URL címét adjuk meg. (Button vagy banner esetében a button
vagy banner képének URL címe) Példánkban a pici kép mérete 90 pixel
széles és 120 pixel magas. |
Nem írtam le részletesen az egyes utasítások paramétereit, hiszen
ezeket már ismernünk kell az előző leckékből:))
Az alábbi példákban a kódot kimásolhatod (Ctrl+C) majd az alul lévő
kódpróba dobozba bemásolhatod (Ctrl+V). Ott aztán alakítsd kedvedre,
mindig nézd meg az eredményt. Ha már minden olyan, ahogy szeretnéd, mentsd
el magadnak és máris csudaszép hirdető dobozaid lesznek:))
Felfelé
Lefelé
Jobbra
Balra
Kódpróba (itt gyakorolhatsz)
|
|
|
|
|
AJÁNLOM AZ OLDALT
Belépés
