Javascript  »  Navigationen  »  CSS-Buttons

zur Übersicht

Kategorie	Navigationen
Bezeichnung	CSS-Buttons
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	34657 Aufrufe davon 1x gestern
Hierfür wurden keine Bilder benutzt, nur CSS. Leider interpretieren das nur IE und NS6. Der Einsatz für die Hauptnavigation sollte also gut überlegt werden, da immer noch ca. 30% aller Surfer den NS4 verwenden..
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <!-- Menu Buttons Part:1 Paste in Head --> <script language="JavaScript"> <!-- IE and NS6 Menu Button script kurt.grigg@virgin.net if (!document.layers){ // Choose size and colours here!!!!!!!!!!!!!!!!!!!!!!!!!! Width=100; Font='Verdana'; FontSize=12; AFontColor='#ffffff'; BFontColor='#ffffff'; CFontColor='#ffffff'; FontWeight='normal'; //normal or bold! BackGround='#0080ff'; //Same as your body bgcolor! BorderDepth=1; BorderLight='#00ccff'; BorderShad='#000000'; //Nothing needs altering past here!!!!!!!!!!!!!!!!!!!!!! function On(id){ with(id.style){ color=BFontColor; borderTopColor=BorderLight; borderLeftColor=BorderLight; borderRightColor=BorderShad; borderBottomColor=BorderShad; } } function Off(id){ with(id.style){ color=AFontColor; borderTopColor=BackGround; borderLeftColor=BackGround; borderRightColor=BackGround; borderBottomColor=BackGround; } } function Down(id){ with(id.style){ color=CFontColor; borderTopColor=BorderShad; borderLeftColor=BorderShad; borderRightColor=BorderLight; borderBottomColor=BorderLight; } } function Link(Url,Txt){ document.write("<a href='"+Url+"'>" +"<div style='position:relative;" +"width:"+Width+"px;height:"+FontSize+"px;" +"border-width:"+BorderDepth+"px;" +"border-color:"+BackGround+";" +"border-style:solid;" +"padding:"+FontSize/3+"px;" +"background:"+BackGround+";" +"font-family:"+Font+";" +"font-size:"+FontSize+"px;" +"line-height:"+FontSize*1.2+"px;" +"font-weight:"+FontWeight+";" +"text-align:left;" +"color:"+AFontColor+";" +"margin-top:2px;" +"cursor:hand'" +"onMouseOver='javascript:On(this)'" +"onMouseOut='javascript:Off(this)'" +"onMouseDown='javascript:Down(this)'>" +Txt+"</div></a>"); } } function Temp(){ alert("TEST"); } //--> </script> <!-- End Menu Buttons Part:1 --> <!-- Menu Buttons Part:2 Paste in Body where needed --> <script language="JavaScript"> <!-- if (!document.layers){ //This table stops oddness in NS6!!! if (document.getElementById&&!document.all){ document.write("<div style='position:relative'>" +"<table border='0' cellpadding='0' cellspacing='0'>" +"<tr><td valign='top'>"); } /* The visible Buttons here! Add as many as you want. Make sure you follow the same format as below */ Link('javascript:Temp()','Yahoo'); Link('javascript:Temp()','Google'); Link('javascript:Temp()','Alta Vista'); Link('javascript:Temp()','Lycos'); Link('javascript:Temp()','Hotbot'); if (document.getElementById&&!document.all){ document.write("</td></tr></table></div>"); } } //--> </script> <!-- End Menu Buttons Part:2 -->

Kommentare zu CSS-Buttons

2 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 22.07.2006 um 01:22 Uhr von Alex
Ich habe eine Frage zu dem Quellcode. Ich habe den Quellcode bereits für meine Zwecke geän... 

am 23.04.2003 um 12:46 Uhr von justin
english: this code is great, just what i was looking for. easy to modify for my exact ne... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen