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.
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 ""
Es gibt noch keine Rezension.
Vielen Dank für Dein Feedback.