|
Pentru a folosi butoanele in scripturi, trebuie ca acestea sa fie mai intai incluse in pagina printr-un formular HTML. Tag-ul <input> prin care este introdus butonul este continut de tag-ul <FORM>:
<FORM>
<INPUT type="button" value="Textul butonului" name="buton1">
</FORM>
Acest cod HTML va plasa un buton pe pagina, dar acesta nu va avea nici un efect, daca il apasati nu se va intampla nimic. Sa analizam comanda javascript care transmite browserului cum sa actioneze daca utilizatorul apasa butonul.
Plasati acest cod in tag-ul INPUT in care ati creat butonul:
<INPUT type="button" value="Textul butonului" name="buton1" onClick=" ">
Daca ati citit capitolul anterior, atunci stiti cum puteti adauga text in status bar folosind comanda onMouseover. Acest lucru este valabil si pentru butoane:
<FORM>
<INPUT type="buton" value="Text" name="buton2"
onClick="window.status='Ati apasat butonul 1'; return true">
</FORM>
Daca testati acest cod, veti vedea ca in status bar a aparut textul „Ati apasat butonul 1”.
De asemenea, puteti permite utilizatorilor sa schimbe culoarea fondului paginii. In loc de window.status folositi comanda:
document.bgColor='culoare'. Introduceti aceasta linie ca instructiune pentru comanda onClick, in modul urmator:
<FORM>
<INPUT type="button" value="Schimba culoarea in verde!"
name="buton3" onClick="document.bgColor='green'">
</FORM>
Puteti adauga oricate butoane de acest gen doriti, dar asigurati-va ca ati inclus si un buton pentru a reveni la culoarea initiala. Scripul urmator va ofera trei optiuni pentru culoarea fondului: verde, albastru sau culoarea originala.
<FORM>
<INPUT type="button" value=" Schimba culoarea in verde!"
name="buton3" onClick="document.bgColor='yellow'"> <br>
<INPUT type="button" value=" Schimba culoarea in albastru!"
name="buton4" onClick="document.bgColor='blue'"> <br>
<INPUT type="button" value="Revenire" name="buton5"
onClick="document.bgColor='white'">
</FORM>
Ultimul script din acest capitol va va arata cum puteti folosi butoanele ca linkuri. Pentru aceasta, folositi comanda: window.location=’url’. De exemplu, iata un script care redirectioneaza utilizatorul catre o pagina oarecare:
<FORM>
<INPUT type="button" value="Alta pagina" name="buton6"
onClick="window.location='http://www.site.com/pagina.htm'">
</FORM>
|