Jump-Button - Website X5 Helpsite

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

Besucher Statistik
» 3 Online
» 1863 Heute
» 150 Gestern
» 2520 Woche
» 5887 Monat
» 33798 Jahr
» 319712 Gesamt
Record: 2303 (07.10.2021)
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.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


          CAPTCHA
          Vielen Dank für Dein Feedback.
          Logo Host Europe
          Button Spenden

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt