HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Untergrundfarbe wechseln ] [ Textfarbe wechseln ] [ Ankerfarbe wechseln ]

Untergrundfarbe wechseln

Mit dem folgenden Script können Sie dem Besucher erlauben, selbst die Untergrundfarbe deiner Seite auszusuchen.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
   <script>
    function HintergrundWechseln (grund) {
     document.bgColor = grund
    }
   </script>
  </head>
  <body style="background-color:#FFFFF">
   <h1>Hintergrundfarbe wechseln</h1>
   <a href="javascript:HintergrundWechseln('#FFFFC0')">gelb</a>  
   <a href="javascript:HintergrundWechseln('#C0C0FF')">blau</a>  
   <a href="javascript:HintergrundWechseln('#C0FFC0')">grün</a>  
   <a href="javascript:HintergrundWechseln('#D0D0D0')">grau</a>  
   <a href="javascript:HintergrundWechseln('#C0FFFF')">türkis</a>  
   <a href="javascript:HintergrundWechseln('#FFC0FF')">pink</a>  
   <a href="javascript:HintergrundWechseln('#FFC0C0')">rot</a>  
   <a href="javascript:HintergrundWechseln('#FFFFFF')">weiss</a>
  </body>
  </html>
Das ganze sieht so aus

Die Hintergrundfarbe wird als Variable durch Anker an die Funktion Hintergrundwechsel übergeben. Durch den Befehl document.bgcolor wird dann die Farbe gewechselt.

Textfarbe wechseln

Analog dazu kann auch die Textfarbe geändert werden.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
   <script>
    function fgWechseln (grund) {
     document.fgColor = grund
    }
   </script>
  </head>
  <body style="background-color:#FFFFF">
   <h1>Textfarbe wechseln</h1>
   <a href="javascript:fgWechseln('#FFFF00')">gelb</a>  
   <a href="javascript:fgWechseln('#0000FF')">blau</a>  
   <a href="javascript:fgWechseln('#00FF00')">grün</a>  
   <a href="javascript:fgWechseln('#808080')">grau</a>  
   <a href="javascript:fgWechseln('#00FFFF')">türkis</a>  
   <a href="javascript:fgWechseln('#FF00FF')">pink</a>  
   <a href="javascript:fgWechseln('#FF0000')">rot</a>  
   <a href="javascript:fgWechseln('#000000')">schwarz</a>
  </body>
  </html>
Das ganze sieht so aus

Ankerfarbe wechseln

oder auch die Ankerfarbe kann geändert werden.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
   <script>
    function AnkerWechseln (grund) {
     document.alinkColor = grund ;
     document.linkColor = grund ;
     document.vlinkColor = grund
    }
   </script>
  </head>
  <body style="background-color:#FFFFF">
   <h1>Ankerfarbe wechseln</h1>
   <a href="javascript:AnkerWechseln('#FFFF00')">gelb</a>  
   <a href="javascript:AnkerWechseln('#0000FF')">blau</a>  
   <a href="javascript:AnkerWechseln('#00FF00')">grün</a>  
   <a href="javascript:AnkerWechseln('#808080')">grau</a>  
   <a href="javascript:AnkerWechseln('#00FFFF')">türkis</a>  
   <a href="javascript:AnkerWechseln('#FF00FF')">pink</a>  
   <a href="javascript:AnkerWechseln('#FF0000')">rot</a>  
   <a href="javascript:AnkerWechseln('#000000')">schwarz</a>
  </body>
  </html>
Das ganze sieht so aus

Dabei bedeutet alinkcolor = Gerade angeklickter Verweis, linkcolor = noch nicht besuchter Verweis und vlinkcolor schon besuchter verweis.

back top next