Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 5
Zur Übersicht

5. Buttons ohne Grafik (08.04.1999)

Es werden zwei CSS-Klassen für den gedrückten bzw. nichtgedrückten Zustand der Buttons definiert. Diese Klassen werden auf Tabellenzellen angewendet und via JavaScript erfolgt die Auswertung der Ereignisse OnMouseOver / OnMouseOut (Beispiel 5a) bzw. OnMouseDown / OnMouseUp (Beispiel 5b). Schließlich wird im Beispiel 5c gezeigt, wie man gedrückte Buttons erhält, die erst bei der Auswahl eines anderen Buttons in ihre Ausgangsposition zurückkehren. Dabei wird lediglich das OnMouseDown-Ereignis mit der JavaScript-Funktion "Schalter" verknüpft, während die CSS-Definitionen den Beispielen 5a und 5b entsprechen. Nun fehlt den Buttons nur noch die Zuweisung von Links auf beliebige URLs. 

      CSS-Definitionen:

      <STYLE TYPE="text/css">
      <!--

      A
      {
      Color: #FFFFFF;
      Text-Decoration: none;
      }
      
      .buttondown
      {
      Background-Color: #FFA500;
      Font-Family: Arial, Verdana, Helvetica, Sans-Serif;
      Font-Weight: bolder;
      Font-Size: 95%;
      Color: #FFFFFF;
      Cursor: hand;
      Border-Top-Color: #000000;
      Border-Left-Color: #000000;
      Border-Right-Color: #C0C0C0;
      Border-Bottom-Color: #C0C0C0;
      Border-Width: thin;
      Border-Style: inset;
      Text-Align: center;
      }

      .buttonup
      {
      Background-Color: #FF0000;
      Font-Family: Arial, Verdana, Helvetica, Sans-Serif;
      Font-Size: 95%;
      Color: #FFFFFF;
      Cursor: hand;
      Border-Top-Color: #C0C0C0;
      Border-Left-Color: #C0C0C0;
      Border-Right-Color: #000000;
      Border-Bottom-Color: #000000;
      Border-Width: thin;
      Border-Style: outset;
      Text-Align: center;
      }
      -->
      </STYLE>


      JavaScript-Funktionen:

      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      var Auswahl, obj;

      function Down(Nr)
      {
        if (document.getElementById)
        {
          Auswahl="Button"+Nr;
          obj=document.getElementById(Auswahl);
          if (obj.className) {obj.className="buttondown";}
        }  

        if (document.all && !document.getElementById)
        {
          Auswahl="Button"+Nr;
          obj=document.all[Auswahl];
          if (obj.className) {obj.className="buttondown";}
        }  
      }

            
      function Up(Nr)
      {
        if (document.getElementById)
        {
          Auswahl="Button"+Nr;
          obj=document.getElementById(Auswahl);
          if (obj.className) {obj.className="buttonup";}
        }
      
        if (document.all && !document.getElementById)
        {
          Auswahl="Button"+Nr;
          obj=document.all[Auswahl];
          if (obj.className) {obj.className="buttonup";}
        }  
      }

      //-->
      </SCRIPT>


      Anwendung der Routinen innerhalb einer Tabelle:

      <TABLE WIDTH="700" CELLSPACING="10" BORDER="0">
      <TR>
      <TD WIDTH="100" ID="Button1" CLASS="buttonup"><A HREF="test.htm"
       OnMouseOver="Down(1)" OnMouseOut="Up(1)">Button 1</A></TD>
      
      <!-- weitere Spalten -->
      
      <TD WIDTH="100" ID="Button6" CLASS="buttonup"><A HREF="test.htm"
       OnMouseOver="Down(6)" OnMouseOut="Up(6)">Button 6</A></TD>
      </TR>
      </TABLE>

5c) JavaScript-Funktion "Schalter" 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      var Auswahl, obj;
      var aktButton=1;
      
      function Schalter(Nr)
      {
        if (document.getElementById)
        {
          Auswahl="Button"+aktButton;
          obj=document.getElementById(Auswahl);
          if (obj.className) {obj.className="buttonup";}
          Auswahl="Button"+Nr;
          obj=document.getElementById(Auswahl);
          if (obj.className) {obj.className="buttondown";}
          aktButton=Nr;  
        }  
      
        if (document.all && !document.getElementById)
        {
          Auswahl="Button"+aktButton;
          obj=document.all[Auswahl];
          if (obj.className) {obj.className="buttonup";}
          Auswahl="Button"+Nr;
          obj=document.all[Auswahl];
          if (obj.className) {obj.className="buttondown";}
          aktButton=Nr;  
        }  
      }

      //-->
      </SCRIPT>