Pas 1: Se editeaza un fisier css:
.menu_buton1
{
cursor: pointer;
background-image:url(img/b_01.jpg);
}
.menu_buton1_hover
{
cursor: pointer;
background-image:url(img/b_01_hover.jpg);
}
Este nevoie de 2 stiluri pentru un buton, stilul default ( cand butonul nu e activ ) – menu_buton1, si stilul care se aplica atunci cand vei fi cu mouse-ul deasupra lui : menu_buton1_hover.
Pas 2: Se editeaza fisierul html:
Vom face un tabel fara margini si fara spatii intre celule.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="121" height="75" class="menu_buton1" onMouseOver='this.className=" menu_buton1_hover"' onMouseOut='this.className=" menu_buton1"' onClick='window.location = "link.html"'>
</td>
</tr>
</table>
Fiecare celula va fi un buton al meniului. Vom seta in fiecare celula dimensiunile dorite prin width si height, apoi ii vom defini clasa default: menu_buton1.
Vom folosi event-urile td-ului pentru a putea schimba stilul celulei fara sa reincarcam pagina. Codul din event-ul onMouseOver de exemplu, se va apela automat cand trecem cu cursorul deasupra elementului. this.className=" menu_buton1_hover" va face ca stilul elementului curent (td-ul nostru) sa se modifice in menu_buton1_hover. Acest stil va seta o alta poza de fundal (vezi pasul 1). La iesirea cu mouse-ul de deasupra elementului, vom schimba iar stilul la cel initial.
Pentru a simula efectul butonului, folosim onClick unde vom afisa alta pagina prin window.location = `link.html`.
Astfel un simplu td, cu 2 poze de fundal si cateva linii de cod, s-a transformat intr-un buton adevarat. In functie de cat de inventivi suntem, putem prezenta utilizatorului interfete atractive, dinamice, evoluate. Acest gen de meniuri este foarte simplu de utilizat si intretinut, singurul lucru dificil fiind designul efectiv al pozelor.
