changing image on page when button is pressed

i have built a page which loads content into a div tag from a php page using javascript.

the problem i am having is that the title for eachg page is not inside the div so i keep being left with the same title on each page.

i have tried to change the image using the onmouseup/down functions but this has not worked.

here is the code for the functions

function loadContent(id) {
			$("#contentArea").load("rpc.php?o="+id+"");
		}
		
		function roll(img_name, img_src)
   		{
   			document[img_name].src = img_src;
	   }
	   function click(img_name, img_src)
	   {
	   		document[img_name].src = img_src;
	   }

here is the code for the button

<a href="javascript:loadContent(1);" onmouseover="roll('about_but', 'buttons/about_but2.png')" onmouseout="roll('about_but', 'buttons/about_but.png')" onmousedown="click('title_img', 'assets/homeP_title.png')" onmouseup="click('title_img', 'assets/aboutP_title.png')"><img src="buttons/about_but.png" name="about_but" border="0" align="left"/></a>