마우스 오버시 이미지가 PageLoad에 공간이 필요합니다.

Question

마우스 오버시 이미지를 표시하고 마우스 아웃시 이미지를 숨기려고합니다. 마우스 오버 및 마우스 아웃에 성공했지만 이미지가 숨겨진 것처럼 보이지만 텍스트 주위의 공간을 실제로 차지합니다. 텍스트가 이미지 공간으로 둘러싸여 있지만 이미지가 mouseover에 표시됩니다.

<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

보십시오 : 대신 "가시 : 숨겨진"의 "디스플레이 : 없음"여기

코드이며, "인라인"또는 "없음", 따라 같은 디스플레이 속성을 수정합니다.

Answer 2

display 스타일을 none과 block/inline 사이에서 전환해야합니다. visibility을 방금 설정하면 공간이 예약됩니다.