Jump-Button - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Jump-Button

Scripte > Button Navigation

Ein simpler Jump-Button mit Mouseover

Hier ein Jump-Buttom mit einer Rollover-/Mouseover-Verlinkung zwei verschiedenen Button.
Zwei fast identische Button auf den WEB-Server in das Verzeichnis "images" kopieren und Dateinamen im CSS-Code entsprechend anpassen.

Example:

   

Demo (oben link -> unten rechts):

Demo (unten rechts -> oben links):

Code für den HEAD-Bereich:

[vor dem /HEAD|Bereich CSS]

<style type="text/css">
.btn_demo1 {
width: 200px;
height: 50px;
}
.btn_demo1 a {
display: block;
width: 200px;
height: 50px;
background-image: url(../images/button-p.gif);
background-repeat: no-repeat;
background-position: top left;
}
.btn_demo1 a:hover {
background-image: url(../images/button-a.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>

Code für den HEAD-Bereich:

[vor dem /HEAD|Bereich CSS]

<style type="text/css">
.btn_demo2 {
width: 200px;
height: 50px;
}
.btn_demo2 a {
display: block;
width: 200px;
height: 50px;
background-image: url(../images/button-p.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
.btn_demo2 a:hover {
background-image: url(../images/button-a.gif);
background-repeat: no-repeat;
background-position: top left;
}
</style>

Code für das HTML-Objekt:

[Objekt HTML]

<div class="btn_demo1">
<a href="ordner/seite.html">
</a></div>

Code für das HTML-Objekt:

[Objekt HTML]

<div class="btn_demo2">
<a href="ordner/seite.html">
</a></div>

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 2 Online
 » 3 Heute
 » 1053 Woche
 » 3754 Monat
 » 61269 Jahr
 » 237569 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü