Avanceret form funktion

Halløj

Jeg bruger pt. en funktion til formatering ved indtastning i database via html forms.

Den ser således ud:

<select name=\"drop\" onChange=\"markText();\">
<option selected>Vælg</option>
<option>Fed</option>
<option>Kursiv</option>
<option>Understreget</option>
<option>Side overskrift</option>
<option>Rød tekst</option>
<option>Blå tekst</option>
<option>Grøn tekst</option>
<option>Link</option>
<option>Bogmærke</option>
<option>Image align=left</option>
<option>Image align=right</option>
<option>Indrykning</option>
<option>Hævet skrift</option>
</select>

Javascriptet der henvises til er:

<script language=\"JavaScript\">
function _tag( a,b ) {
    this.start = a;
    this.end = b;
}

tagArray = new Array();
tagArray[1] = new _tag(\'<b>\',\'</b>\');
tagArray[2] = new _tag(\'<i>\',\'</i>\');
tagArray[3] = new _tag(\'<u>\',\'</u>\');
tagArray[4] = new _tag(\'<span class=overskrift>\',\'</span>\');
tagArray[5] = new _tag(\'<span class=red>\',\'</span>\');
tagArray[6] = new _tag(\'<span class=blue>\',\'</span>\');
tagArray[7] = new _tag(\'<span class=green>\',\'</span>\');
tagArray[8] = new _tag(\'<a href=>\',\'</a>\');
tagArray[9] = new _tag(\'<a name=>\',\'</a>\');
tagArray[10] = new _tag(\'<img src=../images/\',\' align=left border=0 hspace=8>\');
tagArray[11] = new _tag(\'<img src=../images/\',\' align=right border=0 hspace=8>\');
tagArray[12] = new _tag(\'<blockquote>\',\'</blockquote>\');
tagArray[13] = new _tag(\'^\',\'\');

function markText() {
    var i = document.forms[\"textform\"].drop.selectedIndex;
    if (i != 0 && document.selection.createRange().text != \"\") {
        var temp = document.selection.createRange();
        temp.text = tagArray[i].start+temp.text+tagArray[i].end;
        document.selection.empty();
    }
    document.forms[\"textform\"].drop.selectedIndex = 0;
}   
</script>

Jeg kunne godt tænke mig at lave det om til klickbare ikoner med onclick event. Hvordan gør jeg det?