Hopefully this is a newbie mistake -- I've only been at Javascript for a few days.

I'm trying to make a Magic: The Gathering autocard popup (for example hover over a red link on this site). I want to be able to write <a class='card'>CARDNAME</a> and have an image of CARDNAME hover by the mouse.

I can get it to work if I explicitly give it the whole string (first example in my code) for the image web address, but when I try to combine strings I get a broken image (second and third examples). Maybe there are some non-displaying characters hiding somewhere?

autocard.js
Code:
function init(){
	var imgstart = "http://www.wizards.com/global/images/magic/general/";
	var imgend = ".jpg";
	var imgwhole = [];
	var links = document.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		if(links[i].className == "card"){
			imgwhole[i] = imgstart + links[i].innerHTML.replace(/ /g,"_") + imgend;
			links[i].onmouseover = function(){showcard(imgwhole[i]);};
			links[i].onmouseout = function(){hidecard();};
}}}

function hidecard(){
	document.getElementById("popup").innerHTML = '';
}

function showcard(imagename){
	document.onmousemove=function(){
		document.getElementById("popup").style.left = (5+event.clientX) + "px";
		document.getElementById("popup").style.top = (5+event.clientY) + "px";
	}
	document.getElementById("popup").innerHTML = '<img src="' + imagename + '">';
}
autocard_driver.html
Code:
<html>
<head>
<script src="autocard.js" type="text/javascript"></script>
</head>
<body onload="init()">
<div style="position:absolute" id="popup"></div>
<Center><br><br>
<a onmouseover="showcard('http://www.wizards.com/global/images/magic/general/counterspell.jpg')" onmouseout="hidecard()">EXPLICIT</a>
<br><br><br>
<a class='card'>Grizzly Bears</a><br>
<a class='card'>Counterspell</a><br>
</center>
</body>
</html>