Image on mouseover takes space on PageLoad

I am trying to show an image on Mouseover and hide it on Mouseout. I am successful in mouseover and mouseout but the image is actually taking the space around the text though i have visibility as hidden.. The text is surrounded with the space of image but the image is displayed on mouseover.

Here is the code:

<td valign="middle" class="table_td td top" style="width: 347px">
                                                      <div id="Style16" style="position:relative; height:100%; left:50%; bottom:700%; visibility:hidden; border:solid 0px #CCC; padding:5px"><img src="images/window-decal-image.gif"></div> 
                                                      <s开发者_如何学Gopan class="feature_text" style="cursor:pointer" onmouseover="ShowPicture('Style16',1)" 
                                                      onmouseout="ShowPicture('Style16',0)" id="a16">Storefront Window Decal</span>

                                                      <span class="feature_text_small">(5"x3.5" double sided decal)</span></td>  

<script language="javascript" type="text/javascript">




function ShowPicture(id,Source) 
{
 var vis, elem;

  if (1 == Source)
 {
 vis = "visible";
 }
else if (0 == Source)
 {
 vis = "hidden";
 }
 else
 {
 throw new RangeError("Unknown Flag");
}

 if (elem = document.getElementById(id))
{
  elem.style.visibility = vis;
}
 else
 {
 throw new TypeError("Element with id '"+id+"' does not exist.");
 }
 return vis;
}

</script>

You have to toggle the display style between none and block/inline. If you just set the visibility, space is reserved.

Try "display:none" instead of "visibility:hidden", and modify the display property as "inline" or "none", depending.