Sticky oder auch Fixed Buttons - Scripte, Animationen, Templates und Tipps für WebsiteX5 -

F11 für Vollbildmodus EIN/AUS
13.05.2024
 • 
Direkt zum Seiteninhalt

Sticky oder auch Fixed Buttons

Themenseiten
fixed button
Hier können Sie sich das Script herunterladen. Sie können sogar beliebig viele Buttons erstellen - egal ob links, rechts, oben oder unten. Sie können mit Hilfe von css für jeden Button andere Farben, Schriften, Schriftgrößen, Grafik etc. verwenden. Sie müssen einen neuen Ordner auf Ihrem Server erzeugen, ein paar Zeilen Script-Code mit Hilfe des Inklusiv-Objektes "J HTML-Code" in Ihre Website einfügen und die CSS-Datei und ggf. Grafiken in den Ordner auf Ihren Server hochladen.
Die CSS-Datei muss wie folgt bearbeitet werden:

.btn1 {
 background-color : #000000;
 color: #FFFFFF;
 padding: 4px 4px;
  text-align: center;
  font-family: Tahoma;
  font-size: 10px;
 border-radius: 5px;
 border-color: #000000;
 cursor: pointer;
 }
.btn1:hover {
 background-color: #647079;
 cursor: hand;
   }
#meinbutton1 {
 position: fixed;
 top: 180px;
 left: 4px;
 }
Für jeden Button, der von anderen Buttons abweicht, muss eine ID gewählt werden, die im eigentlichen Script zugeordnet werden kann - hier btn1.
background-color : #000000; ist die Farbe des Buttons (hier Schwarz) und color: #FFFFFF; ist für die Farbe der Schrift (hier Weiss) sofern Sie Text und keine Grafik verwenden wollen - etc.

Dann folgt der Teil, wie sich der Button verhalten soll, wenn der Button mit dem Mauspfeil überfahren wird: .btn1:hover { Hier kann z.B. die Farbe des Buttons geändert werden background-color: #647079; (hier Grau) oder dass der Mauspfeil als eine Hand angezeigt wird cursor: hand;.

Zum Schluss wird die Position des Buttons festgelegt. position: fixed; fixiert den Button an dieser Position wenn sie die Seite nach unten scrollen. Um wie in diesem Beispiel den Button auf der linken Browserseite 180 Pixel vom oberen Browserrand und 4 Pixel vom linken Browserrand zu positionieren, können Sie die CSS-Datei so belassen - andernfalls können Sie geändert werden. Wollen Sie mehrere Buttons anzeigen, müssen Sie zumindest den Wert von top: 180px; ändern.
Nun muss das Script für das Anzeigen der Buttons und das hinzuladen der CSS-Dateien angepasst, und innerhalb Ihrer Seite, in der Sie den oder die Buttons anzeigen wollen, in das Inklusiv-Objekt "J HTML-Code"  eingefügt werden.

Es beginnt mit dem hinzuladen der CSS-Datei:
<link rel="stylesheet" type="text/css" href="sticky_buttons.css" media="screen" />

Unter :
<div id="meinbutton1">
<button class="btn1"; onclick="window.location.href = 'dateiname.php'"><img src="meine_grafik.png" BORDER=0 height=30 width=30</30></button>
</div>
müssen Sie nun für dateiname.php die gewünschte Seite wie z.B. cookie.php oder cookie.html eingeben

c Wichtig: die button class muss entsprechend wie in der CSS-Datei benannt wurde, lauten. Der Dateiname zur Seite, die beim Anklicken geladen werden soll, muss angepasst werden. Das Apostroph (' ) vor dem Anführungszeichen (" )  am Ende der URL ist notwendig!
Für jeden weiteren Button fügen Sie den letzten Script-Teil mit den entsprechenden Anpassungen ein. Hier ein Beispiel:

<div id="meinbutton2">
<button class="btn2"; onclick="window.location.href = 'noch_eine_seite.php'"><img src="ein_weiteres_bild.png" BORDER=0 height=30 width=30</30></button>
</div>

Wollen Sie statt einer Grafik Text verwenden, sieht das Script so aus:

<div id="meinbutton3">
<button class="btn3"; onclick="window.location.href = 'noch_eine_weitere_seite.php'">Hier gehts zur Seite</button>
</div>

Und hier können Sie sich das Script herunterladen, dass Buttons - wie auf dieser Seite zu sehen - anzeigt oder die Anleitung zum Script in einer PDF-Datei herunterladen:


Eine Anleitung im PDF-Format ist in der ZIP-Datei enthalten.
Viel Spaß mit dem Script...
fixed button
Revision 00 vom 10.05.2023 - Seitenerstellung und Script
website security
Letzte Aktualisierung: 13.05.2024
internet-abc.de   /
für Kinder, Lehrkräfte und Eltern
Zurück zum Seiteninhalt