Using getElementByID for image swap

I'm needing to swap small image elements inside a button along with changing some styling of the button using CSS. The CSS is working great, I'm just not able to swap my images. Since I'm using the same image on several buttons on the same page I'd rather condense the image swap in the body. For some reason my element id is coming up NULL and failing.

Thanks!
Aus2Srq

<script type="text/javascript">
function swapCSS(id, newClass) {
	id = document.getElementById(id);
	id.className = newClass;
}
function btn_plusHover(imgId){
	imgId=document.getElementById(imgId);
	imgId.src = "images/button-plus-hover.png";
}
function btn_plusNorm(imgId){
	imgId=document.getElementById(imgId);
	imgId.src = "images/button-plus.png";
}
</script>

<a href="#" onMouseOver="swapCSS('create-folder','button-hover'); swapCSS('create-folder-value','button-value-hover'); btn_plusHover(btnPlus_cf);" onMouseOut="swapCSS('create-folder','button-active');swapCSS('create-folder-value','button-value'); btn_plusNorm(btnPlus_cf);" onMouseDown="swapCSS('create-folder','button-pressed');" onMouseUp="swapCSS('create-folder','button-active')"><button id="create-folder" type="button" class="button-active"><div id="create-folder-value" class="button-value"><nobr><img  id="btnPlus_cf" border="0" src="images/button-plus.png" style="float: left; margin: 0; padding: 0;">Create&nbsp;Folder</nobr></div></button></a>

Select allOpen in new window