[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]

Wygląda że jestem za tępy (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Dałem tak:

Kod

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

A 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
document.getElementById('lang1').value=mp3;
document.getElementById('lang2').value=video;
document.getElementById('lang3').value=torrent;
document.getElementById('lang4').value=lyrics;
document.getElementById('lang5').value=wikipedia;
document.getElementById('lang6').value=images;
}

I coś nie działa (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Zamiast np. search-mp3,tiesto,1.html jest search-,tiesto,1.html

Ten post edytował necro 9.08.2008, 15:56:18