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 {
</style>background-image: url(images/btn_demo-a.gif);background-repeat: no-repeat;background-position: bottom right;}
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 {
</style>background-image: url(images/btn_demo-a.gif);background-repeat: no-repeat;background-position: top left;}
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.
Vielen Dank für Dein Feedback.
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