HTML Grundkurs

Grundaufbau

  • Notwendigkeiten
  • Aufbau
  • Der Head
  • Der Body
  • Schrift
  • Links
  • Textpositionierung
  • Tabellen
  • Formulare
  • Bilder

    Zusätzliches

  • Spezielles Text
  • Spezielles Bilder

    Hilfen

  • Uploaden
  • Hilfen
  • Mouse Roll-overs

    Man trifft es manchmal auf Webseiten: Man fährt mit dem Cursor über einen Button und dieser verändert sich. Dies nennt sich 'Mouse Roll-over', 'Roll-over' oder 'Mouse-over'. Der Trick ist ziemlich einfach: Man erstellt zwei gleichgrosse Grafiken, eine die immer angezeigt wird und eine, die beim Überfahren mit dem Cursor erscheinen soll.

    Wie die Grafiken benannt werden, ist eigentlich egal. Am übersichtlichsten ist sicher für den Originalbutton 'name.gif' oder 'name-normal.gif' und für die zweite Grafik 'name1.gif' oder 'name-aktiv.gif'.

    Im HEAD wieder ein kurzes CSS-Script einfügen, das kopiert und angepasst werden kann.

    Das wollen wir erreichen:
    Die Grafik 'beispiel.gif' soll bei Mauskontakt durch 'beispiel1.gif' ersetzt werden. Der Link führt wieder auf diese Seite 'rollover.html'.
    beispiel.gif beispiel1.gif

    Code: (die fetten Teile müssen anpepasst werden)

    <HEAD>
    <TITLE>Eine Seite mit sich bewegenden Buttons (Roll-over)</TITLE>

    <style type="text/css">
    <!--
    a.link1:link,
    a.link1:visited {
    display: block;
    background: url(beispiel.gif) no-repeat;
    width: 200px;
    height: 50px;
    }
    a.link1:hover,
    a.link1:active {
    background: url(beispiel1.gif) no-repeat;
    }
    span.linktext {
    display: none;
    }
    -->
    </style>

    </HEAD>

    Dann:

    <A HREF="rollover.html" class="link1"><SPAN class="linktext">Beispiel</SPAN></A>

    So sieht es aus:

    Beispiel

    Kommentar: Im ersten Block wird die Standardeinstellung des Buttons definiert. Im zweiten steht, welches Bild beim Überfahren des Buttons angezeigt wird. span.linktext/class="linktext" blendet den Text aus, den wir dem Button für die Suchmaschinen zuweisen. Diese können keine Bilder "lesen", erkennt so aber den Link-Titel.

    Hier gibts noch mehr Beispiele.

    wieder hoch
     
    erstellt von Nicole Wellinger -