have you tried putting the onmouseout in the first span?
also:
restoreme(this,'images/off1.gif');"
the this would refers to the span object, not the img object.
the return false; is also misplaced, it should be the last statement in the onmouseover and onmouseout functions.
working code:
<div class="code"><script type="text/javascript">
function ShowText(id) {
document.getElementById(id).style.display = 'block';
}
function HideText(id) {
document.getElementById(id).style.display = 'none';
}
function replaceme(which,img) {
document.getElementById(which).src = img;
}
function restoreme(which,img) {
document.getElementById(which).src = img;
}
</script>
<style type="text/css">
<!--
.box {
background-color: #504D6F;
border: 1px solid #FFF;
height: 100px;
width: 200px;
padding: 5px;
}
-->
</style>
<span onmouseover="ShowText('answer1'); replaceme('img','images/on.gif'); return false;" onmouseout="HideText('answer1'); restoreme('img','images/off1.gif'); return false;" >
<img src="images/off1.gif" id="img" style="position:relative; left:200px; top:200px; width:200px; height:100px;"></span>
<span id="answer1" class="box" style="display:none;">text info</span></div>
</body>
</html>
Demo: http://www.reactionwebdesign.com/demos/singlepage/imagebox.html
for your second question, in order to change the position of the box, you must tweak the css ( try adding top, left)