|
Efekt rollover jest ciekawym elementem, kt≤ry
bardzo uatrakcyjni Wasze strony. Przez niekt≤rych
uznawane za czarn▒ magiΩ, s▒ bardzo proste w
utworzeniu. Oto kodzik:
<A HREF="http://www.nirvanka.best.prv.pl"
onMouseOver='podmieniany_obrazek.src="nowy.jpg"'
onMouseOut='podmieniany_obrazek.src="stary.jpg"'>
<IMG SRC="stary.jpg" NAME="podmieniany_obrazek"
BORDER="0"></A>
MuszΩ nadmieniµ, ┐e obrazki powinny byµ takiej
samej wielko╢ci. Po pierwsze, je╢li obrazki
zmieniaj▒ wielko╢µ, czΩsto reszta strony siΩ
przesuwa, co wygl▒da okropnie. Poza tym, je╢li
obrazek znacznie r≤┐ni siΩ wielko╢ci▒, w
netszkapie bΩdzie nieczytelny. Netscape nie zmieni
bowiem rozmiaru obrazka.
Te╢cik:
Jest jeszcze jeden problem, na kt≤ry nale┐y zwr≤ciµ
uwagΩ. Na dysku lokalnym wszystko jest idealnie,
ale po wys│aniu na serwer czekasz, czekasz i jako╢
obrazka nie ma. Je┐eli obrazek, kt≤ry ma siΩ
pojawiµ po najechaniu na niego jest zbyt du┐y,
jego │adowanie z Internetu bΩdzie trwa│o zbyt d│ugo.
Nale┐y zastosowaµ tzw. preloading. Nie rozwi▒zuje
to problemu ca│kowicie, ale obrazki s▒ │adowane
od razu, i gdy u┐ytkownik na co╢ najedzie, obrazek
bΩdzie ju┐ prawdopodobnie za│adowany. Preloading
przydaje siΩ tak┐e, gdy masz ma│▒ galeriΩ. Od
razu ╢ci▒gaj▒ siΩ miniaturki i du┐e wersje. U┐ytkownik
zaczeka tylko na ca│kowite za│adowanie galerii, i
mo┐e podziwiaµ wszystko w pe│nej okaza│o╢ci
offline.
|
|
Oto kodzik preloadnigu:
<SCRIPT LANGUAGE="javascript1.1">
<!--
obrazek1=new Image(); obrazek1.src="1.jpg"
obrazek2=new Image(); obrazek2.src="2.jpg"
//-->
</SCRIPT LANGUAGE="javascript1.1">
Skrypt nale┐y umie╢ciµ w sekcji HEAD. úaduje on
obrazki, nie wy╢wietlaj▒c ich. Za pomoc▒
preloadingu mo┐na te┐ ustaliµ kolejno╢µ wy╢wietlania
siΩ element≤w na stronie. Przy u┐yciu preloadnigu
nale┐y zmieniµ kod preloadnigu na:
<A HREF="http://www.nirvanka.best.prv.pl"
ONMOUSEOVER="pic1.src=obrazek2.src"
ONMOUSEOUT="pic1.src=obrazek1.src">
<IMG SRC="1.jpg" BORDER="0"
NAME="pic1"></A>
Chodzi o prawdziwe wykorzystania preloadnigu.
Wszystkie kody zosta│y sprawdzone, i zosta│y
wykorzystane podczas pracy nad tym textem. Musz▒
dzia│aµ, chyba, ┐e webmaster co╢ zmieni :-)
Rollover przyk│adowy zosta│ stworzony za pomoc▒
preloadnigu. Je╢li masz jakie╢ problemy z tym
przyk│adem, pisz.
Mam nadziejΩ, ┐e to czego Was teraz nauczy│em (i
tak pewnie wszyscy to potrafi▒ :-P) pomo┐e wam
uatrakcyjniµ Wasz▒ stronΩ.
ydgin
ydgin@skrzynka.pl
http://www.nirvanka.best.prv.pl
|
|
