Buttons

Full Metall Buttons

Buttonkonsole in technoidem Design
Die Knöpfe sehen nicht nur aus, sondern funktionieren auch. Bitte ausprobieren!

zurück zum Seitenanfang
zurück zur letzten Seite
diese Seite jetzt drucken
wieder vor

Das sind alle benötigten Grafiken nochmal einzeln zum Mitnehmen:

seitenanfang (1K)zurueck (1K)print (1K)vor (1K)
seitenanfang_aktiv (1K)zurueck_aktiv (1K)print_aktiv (1K)vor_aktiv (1K)
background (5K)

Hier der Quelltext zum Einbetten der Buttons:
Einfach markieren und in neuem Dokument an gewünschter Stelle einfügen
(Im Beispiel befinden sich die Grafiken in einem Ordner namens "img")

<div id="metallic" style=
"background-image:url(img/background.gif);
background-repeat:no-repeat; width:150px; height:150px;
padding:25px;">
<script type="text/javascript">
if (document.images)
{
bild1 = new Image;
bild2 = new Image;
bild1.src =
"img/seitenanfang.gif";
bild2.src =
"img/seitenanfang_aktiv.gif";
bild3 = new Image;
bild4 = new Image;
bild3.src =
"img/zurueck.gif";
bild4.src =
"img/zurueck_aktiv.gif";}
bild5 = new Image;
bild6 = new Image;
bild5.src =
"img/print.gif";
bild6.src =
"img/print_aktiv.gif";
bild7 = new Image;
bild8 = new Image;
bild7.src =
"img/vor.gif";
bild8.src =
"img/vor_aktiv.gif";
function neuBild(name, image)
{
if (document.images)
{
document[name].src = eval(image+".src");
}
}
</script><a href="#top" onmouseover=
'neuBild("seitenanfang", "bild2")' onmouseout=
'neuBild("seitenanfang", "bild1")'><img src=
"img/seitenanfang.gif"
 name="seitenanfang" width="98" height="25" alt=
"zur&uuml;ck zum Seitenanfang"></a><br><a href=
"javascript:history.back()" onmouseover=
'neuBild("zurueck", "bild4")' onmouseout=
'neuBild("zurueck", "bild3")'><img src=
"img/zurueck.gif"
 name="zurueck" width="98" height="25" alt=
"zur&uuml;ck zur letzten Seite"></a><br><a href=
"javascript:window.print();" onmouseover=
'neuBild("print", "bild6")' onmouseout=
'neuBild("print", "bild5")'><img src=
"img/print.gif"
 name="print" width="36" height="25" alt=
"diese Seite jetzt drucken"></a><br><a href=
"javascript:history.forward()" onmouseover=
'neuBild("vor", "bild8")' onmouseout=
'neuBild("vor", "bild7")'><img src=
"img/vor.gif"
 name="vor" width="98" height="25" alt="wieder
vor"></a></div>

Noch mehr Buttons

mit dünner blauer Umrandung für Seiten mit weisser Hintergrundfarbe:

zurück zur letzten Seite wieder vor zurück zum Seitenanfang diese Seite jetzt drucken

Hier der Quelltext zum Einbetten der Buttons:
(Im Beispiel befinden sich die Grafiken in einem Ordner namens "img")

<a href=
"javascript:history.back();"><img src=
"img/zurueck.GIF" width="98" height="25"
alt="zur&uuml;ck zur letzten Seite"></a> <a href=
"javascript:history.forward()"><img src=
"img/vor.GIF" width="98" height="25" alt=
"wieder vor"></a> <a href="#top"><img src=
"img/seitenanfang.GIF" width="98" height=
"25" alt="zur&uuml;ck zum Seitenanfang"></a> <a href=
"javascript:window.print();"><img src=
"img/print.GIF" width="36" height="25" alt=
"diese Seite jetzt drucken"></a>

Buttons spezial

für hellgrau umrandete dunkelblaue Leiste

zurück zur letzten Seite wieder vor zurück zum Seitenanfang diese Seite jetzt drucken

Hier der Quelltext zum Einbetten der Buttons:
(Im Beispiel befinden sich die Grafiken in einem Ordner namens "img")

<div id="hellgrau" style=
"background-color: #330066; width:100%; border:solid 5px #ddd;
text-align:center;">
<a href="javascript:history.back();"><img src=
"img/zurueck.GIF"
 width="100" height="25" alt="zur&uuml;ck zur letzten
Seite"></a>
<a href="javascript:history.forward()"><img src=
"img/vor.GIF"
width="100" height="25" alt="wieder vor"></a> <a
href="#top"><img
src=
"img/seitenanfang.GIF"
 width="100" height="25" alt="zur&uuml;ck zum
Seitenanfang"></a>
<a href="javascript:window.print();"><img src=
"img/print.GIF"
 width="37" height="25" alt="diese Seite jetzt drucken">
</a></div>