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 mit Unterordner.

Jump-Button (oben links -> unten rechts):

Jump-Button (unten rechts -> oben links):

Code für den <HEAD> Bereich

.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>

Vor dem </HEAD> Tag

Code für den <HEAD> Bereich

.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>

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<a href="files/x5_demo-return.html"></a>

</div>

Nach dem <BODY> Tag

Code für den <BODY> Bereich

<a href="files/x5_demo-return.html"></a>

</div>

Nach dem <BODY> Tag

Feedbacks zu ""

Kein Kommentar

Vielen Dank für Dein Feedback.