[HTML][JavaScript]Graficzne menu typu radio button Opcje

[necro]

Witam wszystkich.

Od dłuższego czasu męczę się z menu wyboru typu szukania.
Do rzeczy.

Wcześniej miałem wyszukiwanie plików w ten sposób:

Kod

<form action="" method="post" id="search">

             <input type="radio" name="type" value="mp3" id="mp3" checked><label for="mp3"><font size="2">{$lang.mp3}</font></label>
             <input type="radio" name="type" value="video" id="video"><label for="video"><font size="2">{$lang.video}</font></label>
             <input type="radio" name="type" value="torrent" id="torrent"><label for="torrent"><font size="2">{$lang.torrents}</font></label>
             <input type="radio" name="type" value="lyrics" id="lyrics"><label for="lyrics"><font size="2">{$lang.lyrics}</font></label>
             <input type="radio" name="type" value="price" id="price"><label for="price"><font size="2">{$lang.prices}</font></label>
             <input type="radio" name="type" value="auctions" id="auctions"><label for="auctions"><font size="2">{$lang.auctions}</font></label>
             <input type="radio" name="type" value="wikipedia" id="wikipedia"><label for="wikipedia"><font size="2">{$lang.wikipedia}</font></label>
             <input type="radio" name="type" value="images" id="images"><label for="images"><font size="2">{$lang.images}</font></label>
<input name="name" type="text" class="border" />

<input name="submit" type="submit" class="formborder" value="{$lang.search}" />
</form>

Postanowiłem zamienić je na graficzne buttony:

Kod

<form action="" method="post" id="search">
             <ul>    
                 <li><a href="#">{$lang.mp3}</a></li>
                 <li><a class="current" href="#">{$lang.video}</a></li>
                 <li><a href="#">{$lang.torrents}</a></li>
                 <li><a href="#">{$lang.lyrics}</a></li>
                 <li><a href="#">{$lang.wikipedia}</a></li>
                 <li><a href="#">{$lang.images}</a></li>
            
             </ul>
             <div id="search1">
                
                     <p><input type="text" name="name" class="search1" /> <input type="submit" name="submit" value="{$lang.search}" class="button" /></p>
                 </form>

Tutaj można zobaczyć online: http://193.59.120.51/ nie wiem jak to wszystko przenieść na grafikę oraz żeby po wybraniu przycisk się podświetlił tak jak "Filmiki".
Jeżeli ktoś wie jak mi pomóc, to bardzo był bym wdzięczny.


Dziękuje i pozdrawiam

[necro]

Naprawdę tego nie kumam, powiedz mi czy dobrze już mam zrobione:

Menu:

Kod

<form action="" method="post" id="search">
            <ul>    
            
<li><a href="#" name="type" id="lang1" onClick="zaznacz(1)">{$lang.mp3}</a></li>
<li><a href="#" name="type" id="lang2" onClick="zaznacz(2)">{$lang.video}</a></li>
<li><a href="#" name="type" id="lang3" onClick="zaznacz(3)">{$lang.torrents}</a></li>
<li><a href="#" name="type" id="lang4" onClick="zaznacz(4)">{$lang.lyrics}</a></li>
<li><a href="#" name="type" id="lang5" onClick="zaznacz(5)">{$lang.wikipedia}</a></li>
<li><a href="#" name="type" id="lang6" onClick="zaznacz(6)">{$lang.images}</a></li>                

            
            </ul>
            <div id="search1">
                
                    <p><input type="text" name="name" class="search1" /> <input type="submit" name="submit" value="{$lang.search}" class="button" /></p>
                <input type="hidden" value="" name="search" id="search" />
                </form>

JS:

Kod

function zaznacz(id){
//odznaczamy wszytskie - mozna uzyc for, while
document.getElementById('lang1').className='';
document.getElementById('lang2').className='';
document.getElementById('lang3').className='';
document.getElementById('lang4').className='';
document.getElementById('lang5').className='';
document.getElementById('lang6').className='';
//zaznaczamy
document.getElementById('lang'+id).className='current';
//przekazujemy parametr
if(id==1){ wart="mp3"; }
if(id==2){ wart="video"; }
if(id==3){ wart="torrents"; }
if(id==4){ wart="lyrics"; }
if(id==5){ wart="wikipedia"; }
if(id==6){ wart="images"; }

document.getElementById('search').value=wart;
}