button

Full Metall Buttons

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

---

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

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:

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

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>