Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» Startseite » HTML, CSS und JavaScript Tutorials

CSS: Rollover-Effekt (einfarbig)

Auf vielen Webseiten sieht man den sogenannten "Rollover-Effekt". Dabei fährt man z.B. über ein Feld in der Navigation, woraufhin sich das Hintergrundbild ändert. Auf vielen Webseiten ist dieser Effekt mit Javascript realisiert. CSS hat in diesem Punkt allerdings einige Vorteile

  • Viele Benutzer haben JavaScript in ihrem Browser ausgeschaltet.
  • Fast alle Benutzer haben CSS-Unterstützung in ihrem Browser.
  • CSS ist schneller und einfacher zu verstehen.


Als Beispiel hier eine einfache Navigation:

  1.  <div id="navigation">
  2.  <ul>
  3.  <li><a href="#">Startseite</a></li>
  4.  <li><a href="#">Irgendeine Seite</a></li>
  5.  <li><a href="#">Noch eine Seite</a></li>
  6.  </ul>
  7.  </div>

Das # muss dabei natürlich durch den entsprechenden Verweis (URL) ersetzt werden.

In den Header der Seite (also zwischen <head> und </head>) muss folgender CSS-Code:

  1.  <style type="text/css"></style>

Das Ergebnis sieht dann so aus:

Natürlich können die Farben entsprechend angepasst werden. (Siehe hier)



Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
XHTML - HTML allgemein
XHTML - Textauszeichnungen
monatlich wechselnder Link mit JavaScript
XHTML - Grafiken
Übersichlichere Formulare


 
Anzeige