You dont want to use hidden vars the way you do. And then, remember what I said about stacking javascript. You want ONE hidden var that will contain the choice, like so:
Then you simply update the hidden var the same way you update the template when a user clicksHTML Code:<input name="chosenBackground" type="hidden" id="chosenBackground">
HTML Code:
<img src="images/pics/eagle_th.jpg" alt="eagle" style="cursor:pointer" onclick="document.getElementById ('cardTemplate').style.backgroundImage='url(images/pics/eagle.jpg);document.getElementById ('chosenBackground').value=this.src;">
<img src="images/pics/pond_th.jpg" alt="pond" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/pond.jpg);document.getElementById ('chosenBackground').value=this.src;">
... etc....
PS - use title in place of alt to get it to work in firefox and safari