 Box 02 an fester Position unten rechts
Beim Scrollen soll Up-Link (nach oben), ein Info oder eine Textbox immer am unteren rechten Rand des Fensters angezeigt werden. Ein <div>-Bereich wird immer unten rechts angezeigt. Einsetzbar als fließender 'Nach-Oben-Link' oder auch für eine Info-Box.
|
|
Floating Box 02 - Positionierung: fließend unten rechts
Überlegungen zur Funktion
|
Die Information sollte auch beim Scrollen immer am unteren rechten Fensterrand angezeigt werden.
Außerdem war es mein Ziel, die Höhe des dort angezeigten DIV-Bereichs, möglichst leicht anpassen zu können. Schließlich muss der 'Nach-Oben-Link' nicht ausschließlich als einzeiliger Textlink dargestellt werden. Eine großflächige Grafik zum Anklicken erleichtert das Leben Ihres Seitenbesuchers.
|
- ein 'Nach-Oben-Link' der beim Scrollen an der festen Position bleibt
- einen Hinweis-Box für den Besucher, auf welcher Seite er sich gerade befindet
- einen Copyrighthinweis oder andere wichtige Info
- ein Verweis zu einr themenverwanden Seite
Die FloatingBox 02 eignet sich hervorragend für einen 'Nach-Oben-Link' in langen Webseiten, zum Beispiel bei einem alphabetisches Register oder einer  SiteMap!
Beispiel 01 zur Demo der Funktion ansehen 
Beispiel 02 zur Demo der Funktion ansehen
Die floating Box unten rechts
Was auch immer Sie in der unten rechts angezeigten 'floatingBox02' anzeigen möchten, notieren Sie innerhalb des verschachtelten zweiten DIVs, dem ich die ID 'floatingContent02' gegeben habe. Es war notwendig diesen inneren DIV-Bereich zusätzlich einzurichten, weil Sie für die 100% breite 'floatingBox02' im FF z.B. keine padding-Angaben notieren können, ohne einen horizontalen Scrollbar zu erzeugen. Für den DIV-Bereich 'floatingContent02' ist das nun möglich.
<div id="floatingBox02">
<div id="floatingContent02">
Hier notieren Sie Ihre Inhalte
</div>
</div>
Für die beiden DIV-Bereiche werden im Head-Bereich des HTML-Dokuments CSS-Angaben notiert. Die Angaben für Schriftformatierungen, Padding und Rand können Sie ändern. Weitere CSS-Angaben für eventuelle Textlinks, die innerhalb des DIVs 'floatingContent02' notiert werden, habe ich ebenfalls eingetragen (siehe Quellcode). So erscheinen Textlinks ohne Unterstrich und erhalten bei MouseOver eine andere Textfarbe.
CSS im Head-Bereich:
#floatingBox02 {
position:absolute;
visibility:hidden;
width:100%;
border:none;
}
#floatingContent02 {
width:100%;
text-align:right;
border: none;
font-family:Verdana,sans-serif;
color:#000000;
font-size:12px;
padding:15px;
}
Notierungen im Body-Bereich:
<div id="floatingBox02">
<!--Anfang Inhalt-->
<div id="floatingContent02">
Hier notierte ich z.B. den HTML-Code des Links
</div>
<!--Ende Inhalt -->
</div>
'Nach-Oben-Link' in der FloatingBox
a nach oben - Textlink
Um einen simplen Textlink einzutragen notieren Sie innerhalb von 'floatingContent02' einen seiteninternen Link der auf den Anker (Sprungmarke) am Anfang des Dokuments verweist.
Gleich nach dem <body>-Tag wird ein Anker notiert:
<body ....
<a name="AnkerOben"> </a>
Der Link auf diesen Anker mit dem Namen 'AnkerOben' steht in der FloatingBox:
<div id="floatingBox02">
<div id="floatingContent02">
<a href="#AnkerOben">
nach oben
</a>
</div>
</div>
b nach oben - Graphiklink
Um einen Graphiklink einzutragen notieren Sie innerhalb von 'floatingContent02' einen seiteninternen Link der auf den Anker (Sprungmarke) am Anfang des Dokuments verweist.
Gleich nach dem <body>-Tag wird ein Anker notiert:
<body ....
<a name="AnkerOben"> </a>
Der Link auf diesen Anker mit dem Namen 'AnkerOben' steht in der FloatingBox:
<div id="floatingBox02">
<div id="floatingContent02">
<a href="#AnkerOben">
<!-- die Höhe im Script eintragen: var Box02Hoehe = 200; -->
<img src="nach-oben-01.gif" width="200" height="200" border="0" alt="">
</a>
</div>
</div>
Ich zeige im Beispiel 02 eine Demo-Sitemap mit der Floating Box 02, die eine Graphik als Verweisfläche hat.
Beispiel 02 zur Demo der Funktion ansehen
transparente Graphiken
Die transparenten Graphiken habe ich selbst entworfen (Darstellung hier mit Rand). Rechtsklicken zum Download. Bei einer Verwendung für dieses Beispiel den Dateinamen der Graphik entsprechend eintragen.
|
Home • DHTML • Up-Link
ZIP
