nicht angemeldet
«div», CSS, Javascript + Netscape
Hallo,
ich moechte den IE-Hover-Effekt per JavaScript fuer Netscape nachbilden, wie in der Forumsauslese beschrieben.
Das funktioniert prima - solange man die <div>s absolut positioniert.
Ich braeuchte sie allerdings in einer Tabelle, da der Inhalt zentriert werden soll. Position: relative macht das,
nur der Netscape (ich teste mit 4.73) verhaelt sich unerwartet.
Mein Test-Beispiel - http://www.ghi-ulm.de/test.html - sieht so aus:
(ich lasse auch den IE per 'innerHTML' die links aendern, da soll mal ein dyn. Menue draus werden)
<HTML>
<HEAD>
<TITLE>test</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
function highlight(a1, a2, a3)
{
inhalt='<a class="on" href="'+a3+'" onMouseOut="downlight(''+a1+'',''+a2+'',this.href)">'+a2+'</a>';
if (document.layers)
{
document.layers[a1].document.open();
document.layers[a1].document.write(inhalt);
document.layers[a1].document.close();
}
else
{
document.all[a1].innerHTML = inhalt;
}
}
function downlight(b1, b2, b3)
{
inhalt='<a class="off" href="'+b3+'" onMouseOver="highlight(''+b1+'',''+b2+'',this.href)">'+b2+'</a>';
if (document.layers)
{
document.layers[b1].document.open();
document.layers[b1].document.write(inhalt);
document.layers[b1].document.close();
}
else
{
document.all[b1].innerHTML = inhalt;
}
}
</SCRIPT>
<STYLE type="text/css">
<!--
#ebene0 {
position : relative;
}
#ebene1 {
position : relative;
}
A {
FONT-FAMILY : Arial, Helvetica, Sans-Serif;
FONT-SIZE : 10pt;
TEXT-DECORATION: none;
FONT-WEIGHT : normal;
}
A:link { COLOR: #000000; }
A:visited { COLOR: #888888; }
A:active { COLOR: #cc0000; }
A:hover { COLOR: #cc0000; }
A.on:link { COLOR: #cc0000; }
A.on:visited { COLOR: #990000; }
A.off:link { COLOR: #000000; }
A.off:visited { COLOR: #888888; }
-->
</STYLE>
</HEAD>
<BODY bgcolor=#f7f7f7 leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<TABLE width=100% height=100% border=0 cellpadding=0 cellspacing=0><TR><TD align=center valign=middle>
<TABLE border=0 cellpadding=0 cellspacing=0><TR><TD>
<div id="ebene0"><a href="seite1.html" onMouseOver="highlight('ebene0', 'LINK 1', this.href)">LINK 1</a></div>
<div id="ebene1"><a href="seite2.html" onMouseOver="highlight('ebene1', 'LINK 2', this.href)">LINK 2</a></div>
</TD></TR></TABLE>
</TD></TR></TABLE>
</BODY>
</HTML>
- faehrt man ueber LINK1, verschwindet dieser, LINK2 bleibt sichtbar, erzeugt aber kein onMousOver mehr
- faehrt man ueber LINK2, verschwindet dieser, LINK1 bleibt sichtbar, drueber: verschwindet auch
Insgesamt sieht‚s so aus, als ob der Netscape sich nicht mehr an die urspruenglichen CSS-Angaben 'erinnert':
Ich hab‚ den <div>s mal farbigen Hintergrund verpasst, der verschwindet, sobald das Script ausgefuehrt wurde.
Gibt‚s dafuer eine Loesung?
- layer-tags einfuegen hat nichts gebracht
- left/top/width/height etc. der Ebenen angeben hat nichts gebracht
Vielen Dank,
Guenter.