Image on mouseover takes space on PageLoad.
- by Ram
Hello,
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>
<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>
