Jump-Button - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Jump-Button

Scripte > Button Navigation

Ein simpler Jump-Button mit MouseOver

Ein Buttom der einfach bei MousOver springt. Das augenscheinliche Springen wird natürlich über 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 im Unterordner.
Download Button
Jump-Button (oben links -> unten rechts):
Jump-Button (unten rechts -> oben links):
Code für den <HEAD> Bereich
<style typ="text/css">
.Obj126_1 { width: 200px; height: 50px; }
.Obj126_1 a {
display: block;
width: 200px;
height: 50px;
background-image: url(images/btn_demo-p.gif);
background-repeat: no-repeat;
background-position: top left; }
.Obj126_1 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 typ="text/css">
.Obj126_2 { width: 200px; height: 50px; }
.Obj126_2 a {
display: block;
width: 200px;
height: 50px;
background-image: url(images/btn_demo-p.gif);
background-repeat: no-repeat;
background-position: bottom right; }
.Obj126_2 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_1">
<a href="files/x5_demo-return.html"></a>
</div>
Code für den <BODY> Bereich
<div class="Obj126_2">
<a href="files/x5_demo-return.html"></a>
</div>
Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 3 Online
» 141 Heute
» 387 Gestern
» 786 Woche
» 5212 Monat
» 5212 Jahr
» 332968 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt