Edit HTML code

I have got HTML code for slideshow to post, but i want 'next' and 'prev' buttons at left and right side in middle section of the slideshow with hover effect, for example - Widgets and Tricks: Orbit: jQuery Image Slider
Please someone help me. Thnx in advance.

The HTML code is given below ----------------------------------

<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<script type="text/javascript">
// Author: ricocheting.com
// Description: slideshow that allows visitors to flip through a series of images on your website

var x=0;

function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0) x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;}

function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 5000); } }
</script>

<form name="ff">
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
<tr><th align="center">mother teresa</th></tr>

<tr><td align="center">
<img src="http://3.bp.blogspot.com/-LQ4rmKzvwyE/VOLwSF1OuEI/AAAAAAAAAAs/sEEr1KIT5xs/s1600/Mother-Teresa7.jpg" width="550" name="show">
</td></tr>

<tr><td align="center" style="border:1px black solid;">
<select name="slide" onChange="rotate(this.selectedIndex);">
<option value="http://3.bp.blogspot.com/-LQ4rmKzvwyE/VOLwSF1OuEI/AAAAAAAAAAs/sEEr1KIT5xs/s1600/Mother-Teresa7.jpg"></option>
<option value="http://3.bp.blogspot.com/-a3Iiqvbtsh4/VOLwSRBn_TI/AAAAAAAAAAw/BaOSrGOth6w/s1600/mother-teresa77.jpg"></option>
<option value="http://3.bp.blogspot.com/-JrpHMdyW6Uo/VOLwQ1lZzGI/AAAAAAAAAAk/h14FJ0crZaA/s1600/mother-teresa.jpg"></option>
<option value="http://3.bp.blogspot.com/-g_KJJsDUO_Y/VOLwUFvoS1I/AAAAAAAAABA/qkm7G51I_5Y/s1600/mothert3.jpg"></option>
<option value="http://2.bp.blogspot.com/-0F9XMbjNReY/VOLwTodv4vI/AAAAAAAAAA8/O-0lEuy7xrk/s1600/motherteresa.jpg"></option>
<option value="http://1.bp.blogspot.com/-LTPasx3hrVw/VOLwVBWD2PI/AAAAAAAAABM/gFPfL_ehGMM/s1600/skepticism_org.jpg"></option>
</select>
</td></tr>

<tr><td align="center" style="border:1px black solid;">
<input type="button" onclick="rotate(0);" value="ll&lt;&lt;" title="Jump to beginning" />
<input type="button" onclick="rotate(x-1);" value="&lt;&lt;" title="Last Picture" />
<input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start': 'Stop');auto();" value="Start" title="Autoplay" style="width:75px;" />
<input type="button" onclick="rotate(x+1);" value="&gt;&gt;" title="Next Picture" />
<input type="button" onclick="rotate(this.form.slide.length-1);" value="&gt;&gt;ll" title="Jump to end" />
</td></tr></table></form>