Jump-Button - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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>

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt