Jump-Button - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 2 Online
» 102 Heute
» 77 Gestern
» 179 Woche
» 1710 Monat
» 18368 Jahr
» 304282 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
Direkt zum Seiteninhalt

Jump-Button

Scripte > Button Navigation

Ein simpler Jump-Button mit MouseOver

Ein Button der einfach bei MousOver springt bzw. seine Position verändert. Das augenscheinliche Springen wird natürlich über die CSS-Definitionen gesteuert.
Dazu können die CSS-Einträge einfach den eigenen Bedürfnissen angepasst werden. Das entsprechende Bild für den Button muss auf dem WEB-Server in einem Verzeichnis z. B. "images" vorliegen bzw. dorthin kopiert werden.
CSS-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen. Nun noch die Pfade zu den Bilddateien und zur verlinkten Seite anpassen, fertig.
Der Pfad kann mit "http://www.domain.tld/" auf eine eigene oder andere Domain und auch derer Unterseiten hinterlegt werden.
Aber auch eine relative Pfadangabe, also ohne "http://www.domain.tld/" für eigene Webseiten ist möglich, auch mit Unterordner.
Download Button
Jump-Button (oben links -> unten rechts):
Jump-Button (unten rechts -> oben links):
Code für den <HEAD> Bereich
<style>
.Obj126_btn1 { width: 200px; height: 50px; }
.Obj126_btn1 a {
display: block;
width: 200px;
height: 50px;
background-image: url(images/btn_demo-p.gif);
background-repeat: no-repeat;
background-position: top left;
}
.Obj126_btn1 a:hover {
background-image: url(images/btn_demo-a.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
Code für den <HEAD> Bereich
<style>
.Obj126_btn2 { width: 200px; height: 50px; }
.Obj126_btn2 a {
display: block;
width: 200px;
height: 50px;
background-image: url(images/btn_demo-p.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
.Obj126_btn2 a:hover {
background-image: url(images/btn_demo-a.gif);
background-repeat: no-repeat;
background-position: top left;
}
</style>
Code für den <BODY> Bereich
<div class="Obj126_btn1">
<a href="files/demo.html"></a>
</div>

oder neuen Browsertab:
<div class="Obj126_btn1">
<a href="files/demo.html" target="_blank"></a>
</div>
Code für den <BODY> Bereich
<div class="Obj126_btn2">
<a href="files/demo.html"></a>
</div>

oder neuen Browsertab:
<div class="Obj126_btn2">
<a href="files/demo.html" target="_blank"></a>
</div>
Feedbacks zu ""

Keine Kommentare gefunden.

Gebe Deine E-Mail-Adresse und Dein Passwort ein, um Dich am Konto anzumelden.


        Passwort vergessen?    |    Abbrechen
      Vielen Dank für Dein Feedback.
      Logo Host Europe
      Button Spenden

      © 2009 - 2021

      Hosting by
      Zurück zum Seiteninhalt