2011-01-04 11 views
0

Ich habe versucht, ein Bild anzuzeigen, wenn ein Mouseover auf Text auftritt. Es funktioniert gut. Und die Ausrichtung des Bildes sollte so gezeigt werden, dass das Ende des Bildes am Behälter sein sollte. Es funktioniert gut mit dem unten gezeigten Code, nur in IE7. In allem wird es abgehackt .. Was ist hier falsch?Ausrichtung für die Bildanzeige bei Hover funktioniert nur im IE7?

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

Kann mir jemand helfen. Danke im Voraus!!

Antwort

0

Ich würde vorschlagen, background-image auf Ihrem div anstelle von einem separaten Tag und background-position:right; zu verwenden, um es nach Ihren Anforderungen auszurichten.

Sie benötigen möglicherweise ein paar andere verwandte Bits von CSS, um es perfekt zu bekommen (background-repeat vielleicht?), Aber ich würde vorschlagen, dass das der Weg ist, es zu tun.

Ich würde auch vorschlagen, dass alle diese Stil-Code in ein separates CSS <style> Element zu verschieben, um die Unordnung in Ihrem HTML-Code zu reduzieren und es lesbarer zu machen.

Verwandte Themen