Hey
I´m new to js trying to have an image with mouseover effect and also a tooltip

I have combined to scripts here to try to get this effect maybe I´m way off but this is what I have so far ..its almost working but not well enough the tooltip appears in the top left and the mouseout dont work...Thanks for the help!

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) {
which.src = img;
}
function restoreme(which,img) {
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'); return false; replaceme(this,'images/on1.gif');" >
<img src="images/off1.gif" style="position:relative; left:200px; top:200px; width:20px; height:20px;"></span>
<span id="answer1" class="box" onMouseOut="HideText('answer1'); return false; restoreme(this,'images/off1.gif');" style="display:none;">text info</span></div>