nicht angemeldet
Hallo Thomas,
Habe diesen Script geschrieben:
Oh mann.
So, nun funktioniert das aber nicht unter Netscape, liegt es am Netscape
Preview Release 2 oder generell an Netscape
Ähm, dir ist klar, dass Netscape bis 4.7 und Netscape ab 5 (also die
Pre-Releases und die Mozilla Milestones) nix aber auch gar nix miteinander
zu tun haben, was das verhalten bei DHTML betrifft ?
- MS Internet Explorer macht hier keine Probleme.
naja, wenn du die <style>'s so schreibst, dass sie funktionieren, funktioniert
die Seite auch im IE nicht mehr so richtig toll. (36pt muss aber auch nicht
sein ;-)
Wo liegt also der Fehler.
Ich geh mal davon aus, dass du das ganze für normale Internet-Benutzer machen
möchtest - also IE4/5 und NN4.x. Der IE Teil klappt ja schon mal.
Der NN positioniert Layer aber absolut, die variable Text-Ausgabe 'klebt' immer
in der linken oberen Ecke. Relative Positionierung plus document.write in
<div> Bereiche klappt nicht so recht, also muss man den Layer an die richtige
Stelle schieben.
So funktioniert es:
<html>
<!-- Copyrights by Thomas Häber webmaster@haeber.de //-->
<head>
<title>Startseite mit dynamischen Inhalt</title>
<style type="text/css">
<!--
a:hover {color:"#FFFFFF";}
a {text-decoration:"none";}
.Zeugs { font-family:"Century Gothic",Arial; font-size:20pt; color:#000000; text-align:center; }
td {font-family:Arial,"Lucida Sans"; font-size:13pt; color:#000000; }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function TextSetzen(welche)
{
switch (welche)
{
default:
case "Nothing":
text="<-- Klicken Sie auf der linken Seite den gewünschten Verweis an.";
break;
case "Touristik":
text="Hier informieren Sie sich über die Touristikangebote der UZE GmbH.";
break;
case "Export":
text="Hier informieren Sie sich über die Import- und Exportgeschäfte sowie die Luftfracht der UZE GmbH.";
break;
case "Diverses":
text="Hier informieren Sie sich über Diverses."
break;
}
TextAnzeigen(text);
}
function TextAnzeigen(text)
{
if(document.all)
document.all.Microsoft.innerHTML = text;
else if(document.layers)
{
// anti Flacker, da die (Y)Position erst nach dem
// document.write() verändert werden kann
document.Netscape.visibility="hidden";
// Text zusammenbauen und ausgeben
document.Netscape.document.open();
Gesamt = '<span class="Zeugs")>'+text+'</span>';
document.Netscape.document.write(Gesamt);
document.Netscape.document.close();
// relative Positionierte <div>'s funktionieren nicht richtig,
// aber immerhin lässt sich die Position eines relativen <div>
// ermitteln und an das absolute <layer> zuweisen
document.Netscape.pageX=document.Microsoft.pageX+5;
// Horizontal positionieren und zentrieren
document.Netscape.pageY=document.Microsoft.pageY-document.Netscape.clip.height/2;
// Ergebnis sichtbar machen
document.Netscape.visibility="show";
}
}
// -->
</script>
</head>
<body onload="TextSetzen('Nothing');" bgcolor="#6666FF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table bordercolor="#FFFF00" align="center" width="550" height="360" cellspacing="0" cellpadding="0" border="1">
<tr height="120">
<td align="center" width="250"><a href="index2.html" onMouseOver="TextSetzen('Touristik');" onMouseOut="TextSetzen();">• Touristik</a></td>
<td width="300" rowspan="3">
<layer name="Netscape" width=290></layer>
<div id="Microsoft" class="Zeugs" style="position:relative; left:0; top:0;" ></div>
</td></tr><tr height="120">
<td align="center" width="250"><a href="index3.html" onMouseOver="TextSetzen('Export');" onMouseOut="TextSetzen();">• Import, Export und Luftfracht</a></td></tr><tr height="120">
<td align="center" width="250"><a href="index4.html" onMouseOver="TextSetzen('Diverses');" onMouseOut="TextSetzen();">• Diverses</a></td>
</tr>
</table>
</body>
</html>
Änderungen:
<style> korrigiert, das hat ja noch nicht mal der IE angezeigt *fg*
4 mal den gleichen Code zu einer Funktion zusammengefasst, sonst kriegt man
ja 'nen Rappel beim rumprobieren.
im Script-Teil alle </ durch </ ersetzt. (Korinthenkackerei, ist nur ein muss,
wenn in einem String "</script>" vorkommt)
Codeteil für Netscape-Ausgabe angepasst: siehe Kommentare.
Immer noch drin ist der bekannte Netscape resize-bug. (Verstell mal die
Fenstergrösse... :( ... einmal Reload drücken -> wieder ok. Steht irgendwo
im Archiv auch ein Abhilfe-Script zu.)
Alternative Realisierung mit vier <div> von den immer nur eins
sichbar ist:
<html><head>
<style type="text/css">
<!--
a:hover {color:"#FFFFFF";}
a {text-decoration:"none";}
.Zeugs { font-family:"Century Gothic",Arial; font-size:20pt; color:#000000; text-align:center; position:absolute; left:0; top:0; width:290; visibility:hidden; }
.MZeugs { font-family:"Century Gothic",Arial; font-size:20pt; color:#000000; text-align:center; position:relative; left:0; top:0; width:290; }
td {font-family:Arial,"Lucida Sans"; font-size:13pt; color:#000000; }
-->
</style>
<script><!--
var letzter;
function TextSetzen(text)
{
if(!text)
text="Nothing";
if(document.all)
document.all.Microsaft.innerHTML = document.all[text].innerHTML ;
else if(document.layers)
{
if(letzter)
document.layers[letzter].visibility="hide";
letzter=text;
// Referenzposition ist der relativ positionierte Layer
// Dahin wird jetzt der Layer, der angezeigt werden soll
// verschoben
document.layers[text].pageX=document.Microsaft.pageX+5;
// in Y-Richtung muss zusätzlich noch zentriert werden.
// dazu wird um die Hälfte des Clip-Bereiches nach oben verschoben.
document.layers[text].pageY=document.Microsaft.pageY-document.layers[text].clip.height/2;
document.layers[text].visibility="show";
}
}
// -->
</script>
</head>
<body onload="TextSetzen();" bgcolor="#6666FF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table bordercolor="#FFFF00" align="center" width="550" height="360" cellspacing="0" cellpadding="0" border="1">
<tr height="120"><td align="center" width="250"><a href="index2.html" onMouseOver="TextSetzen('Touristik');" onMouseOut="TextSetzen();">&:#149; Touristik</a></td>
<td align="center" width="300" rowspan="3">
<div id="Microsaft" class="MZeugs"></div>
<div id="Nothing" class="Zeugs"><-- Klicken Sie auf der linken Seite den gewünschten Verweis an.</div>
<div id="Export" class="Zeugs">Hier informieren Sie sich über die Import- und Exportgeschäfte sowie die Luftfracht der UZE GmbH.</div>
<div id="Diverses" class="Zeugs">Hier informieren Sie sich über Diverses.</div>
<div id="Touristik" class="Zeugs">Hier informieren Sie sich über die Touristikangebote der UZE GmbH.</div></td></tr>
<tr height="120"><td align="center" width="250"><a href="index3.html" onMouseOver="TextSetzen('Export');" onMouseOut="TextSetzen();">• Import, Export und Luftfracht</a></td></tr>
<tr height="120"><td align="center" width="250"><a href="index4.html" onMouseOver="TextSetzen('Diverses');" onMouseOut="TextSetzen();">• Diverses</a></td></tr>
</table></body></html>
Vorteil: Du hast keinen (Text)Inhalt mehr im Script drinstehen, etwas kürzer.
So, jetzt habe ich aber genug Netscape DHTML für heute gelernt.
(Getestet mit NN4.73/IE5.0, keine Garantie das es woanders läuft.)
Gruss,
Carsten