Instead of having multiple divs that you show and hide, you can try this solution as well.
Create two styles, each with a different background image set. Whenever you trap the event that a given image should be marked as correct or wrong, simply swap the style of the div, which will have the affect of switching the background image.
Very quick (and in need of some cleanup) sample code below, you've got the right idea with setting the type with a function...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
width:80px;
height:80px;
float:left;
}
.correct{
background-image:url('correct.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.wrong{
background-image:url('wrong.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.item{
float:left;
height:80px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>