Question

I tried to display a image when a mouseover on text occurs. It works fine. And the alignment of the image should be shown such that the end of the image should be at the container. It works fine with the code shown below, Only in IE7. In everything, it gets chopped off.. What is wrong here?

<td valign="middle" class="table_td td" 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:relative;height:0px;left:50%;bottom:700%;
        visibility:hidden; border:solid 0px #CCC; padding:5px">
        <img src="images/window-decal-image.gif"></div> 

<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>

Can someone help me out. Thanks in advance!!

Answer 1

I’d suggest using background-image on your div instead of a separate <img> tag, and background-position:right; to align it as per your requirements.

You may need a few other related bits of CSS to get it perfect (background-repeat maybe?), but I’d suggest that’s the way to do it.

I’d also suggest moving all that style code into a separate CSS <style> element to reduce the clutter in your HTML code and make it more readable.