I am currently working on displaying images upon mouse over actions. While the functionality is working perfectly, I am facing an issue where the displayed images appear below and the last image takes up space at the bottom. To rectify this problem, I would like the bottom of the last text (which reveals a picture upon mouse over) to be closer to the text itself rather than being close to the top.
Here is the HTML code:
<td valign="middle" class="table_td td top" style="width: 347px">
<span class="feature_text" style="cursor:pointer" onMouseOver="ShowPicture('Style16',1)" onMouseOut="ShowPicture('Style16',0)" id="a16">Storefront Window Decal</span>
<div id="Style16" style="position:absolute; visibility:hidden; border:solid 0px #CCC; padding:5px">
<img src="images/window-decal-image.gif">
</div>
The JavaScript code associated with this functionality:
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;
}
Thank you for any assistance provided.