Un semplice aiutino..

Clicco su "->" e dovrebbe passare l'immagine, clicco su "<-" e dovrebbere andare indietro con l'immagine

ho questo banalissimo e primordiale codice:
Codice PHP:
<script type="text/javascript">
function 
go_1() {
document.getElementById('libro').innerHTML='<img src=\"cap1b.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\"><a onclick=\"back_1()\"> <- </a></a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\"><a onclick=\"go_2()\"> -> </a></a>';
}
function 
go_2() {
document.getElementById('libro').innerHTML='<img src=\"cap1c.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
go_3() {
document.getElementById('libro').innerHTML='<img src=\"cap1d.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
go_4() {
document.getElementById('libro').innerHTML='<img src=\"cap1e.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
go_5() {
document.getElementById('libro').innerHTML='<img src=\"cap1f.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}


function 
back_1() {
document.getElementById('libro').innerHTML='<img src=\"cap1a.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
back_2() {
document.getElementById('libro').innerHTML='<img src=\"cap1b.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
back_3() {
document.getElementById('libro').innerHTML='<img src=\"cap1c.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
back_4() {
document.getElementById('libro').innerHTML='<img src=\"cap1d.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
back_5() {
document.getElementById('libro').innerHTML='<img src=\"cap1e.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
function 
back_6() {
document.getElementById('libro').innerHTML='<img src=\"cap1f.jpg\ /">';
document.getElementById('libro_go_1').innerHTML='<a href=\"#\">[url="#"] <- [/url]</a>';
document.getElementById('libro_go').innerHTML='<a href=\"#\">[url="#"] -> [/url]</a>';
}
-->
</script> 
e come html:

<table border="0" align="center">
<tr>
<th>
<div id="libro">[img]cap1a.jpg[/img]</div>
</th>
</tr>
<tr>
<th>
<font color="white"><div id="libro_go_1"><a onclick="" href="#"> <- </a></div><div id="libro_go"><a onclick="go_3()" href="#"> -> </a></div></font>
</th>
</tr>
</table>


non scorre le immagini, why?


(Premetto che non me ne intendo affatto di js e potete anche suggerirmi una soluzione migliore)