Jump-Button - Website X5 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 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 - 2020




            
            Besucher Statistik
            » 5 Online
            » 80 Heute
            » 1 Gestern
            » 80 Woche
            » 333 Monat
            » 44390 Jahr
            » 268596 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt