Bild auf mouseover nimmt Platz auf PageLoad

Question

Ich versuche, ein Bild auf Mouseover zu zeigen und es auf Mouseout auszublenden. Ich bin erfolgreich in Mouseover und Mouseout, aber das Bild nimmt tatsächlich den Raum um den Text, obwohl ich Sichtbarkeit als versteckt habe. Der Text ist mit dem Raum des Bildes umgeben, aber das Bild wird auf Mouseover angezeigt. Hier

ist der 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> 
                 <span 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> 

Answer 1

Try "display: none" statt "visibility: hidden", und ändern Sie die Anzeigeeigenschaft als "inline" oder "none", je nachdem.

Answer 2

Sie müssen den display Stil zwischen none und block/inline umschalten. Wenn Sie nur visibility festlegen, ist Speicherplatz reserviert.