HTML Tip č. 26: Zajímavý grafický efekt s pomocí VB Scriptu
Velice zajímavých efektů můžete dosáhnout pomocí jednoduchého VB Sciptu. Pokud například hledáte způsob, kterak oživit statické navigační menu na svých www stránkách, ukážeme vám jak na to.
Pro každé tlačítko je nutné nejprve definovat funkce OnMouseOver a OnMouseOut (tedy "když je myš nad" a "když je myš mimo"). V naší ukázce máme dvě tlačítka, která jsme si pojmenovali button1 a button2. Budete-li chtít tlačítek více, budete si je muset nadefinovat zcela shodným způsobem. Začátek skriptu bude tedy vypadat takto:
<SCRIPT language=VBScript>
sub button1_OnMouseOver()
button1.filters.gray.enabled = -1
end sub
sub button1_OnMouseOut()
button1.filters.gray.enabled = 0
end sub
sub button2_OnMouseOver()
button2.filters.gray.enabled = -1
end sub
sub button2_OnMouseOut()
button2.filters.gray.enabled = 0
end sub
</SCRIPT>
Běžný grafický odkaz bez efektu by mohl vypadat následovně:
<A href="stranka1.htm"><IMG height=20 alt="Tlačítko 1" src="tlacit1.gif" width=100 border=0></A>
(pozn.: rozměry, cílovou stránku, název souboru i alternativní text jsou pouze ukázkové a všechny hodnoty lze podle potřeby upravit).
Chcete-li na takový odkaz aplikovat náš efekt, budete je muset upravit následujícím způsobem:
<A href="stranka1.htm"><IMG id=button1 style="FILTER: gray(enabled=0)" height=20 alt="Tlačítko 1" src="tlacit1.gif" width=100 border=0></A>
Důležitá je především hodnota id, která musí být pro každý odkaz jiná a musí korespondovat s názvem tlačítka, které jsme si nadefinovali výše.
Kompletní zdroják pro dvě tlačítka by tedy vypadal následovně:
<SCRIPT language=VBScript>
sub button1_OnMouseOver()
button1.filters.gray.enabled = -1
end sub
sub button1_OnMouseOut()
button1.filters.gray.enabled = 0
end sub
sub button2_OnMouseOver()
button2.filters.gray.enabled = -1
end sub
sub button2_OnMouseOut()
button2.filters.gray.enabled = 0
end sub
</SCRIPT>
<A href="stranka1.htm"><IMG id=button1 style="FILTER: gray(enabled=0)" height=20 alt="Tlačítko 1" src="tlacit1.gif" width=100 border=0></A><br>
<A href="stranka2.htm"><IMG id=button2 style="FILTER: gray(enabled=0)" height=20 alt="Tlačítko 2" src="tlacit2.gif" width=100 border=0></A>
Nu a jak vypadá výsledek si můžete vyzkoušet sami
 |
