Gimp-Werkstatt

nach oben

Animierte Buttons mit GAP basteln

Es gibt viele Internetseiten, auf denen man Flash-Buttons kostenlos generieren kann. Diese Buttons sehen auch sehr schön aus, sind aber nicht barriere frei. Hast du also keinen Flashplayer in deinem Webbrowser, kannst du die Schaltflächen nicht bedienen.

Möchtest du deine Webseite Barrierefrei halten, kannst du solche Buttons auch mit GAP basteln.

Das könnte dann so aussehen:
buttons/index.html

Schaltflächen auf einer Webseite besitzen mehrere Zustände:

  1. den Normalzustand
  2. den Hover- oder auch Mouseover-Zustand
    Man fährt mit der Maus darüber
  3. den Mouse-out oder auch Visited-Zustand
  4. aktiv, der Zustand in dem der Link geklickt wird.

Alle Webbastler kennen diese Zustände auch als Pseudoklassen:

•a
• a:visited
• a:hover
• a:active

Die beiden Zustände Gedrückt und Mouse-out oder auch a:visited und a:active werden nur bei Webseiten benötigt, die in Frames oder mit PHP gebastelt sind. Reine HTML-CSS-Seiten benötigen diese beiden Pseudoklassen nicht. Es reichen die beiden Zustände:

a (Normalzustand) und
a:hover (Mouseover-Zustand)

Genug mit der Theorie, gehen wir ans Basteln.

Für jeden Zustand benötigst du nun eine Grafik.


Buttonliste 1

Buttonliste 2


Ich hoffe, ich konnte deine Fantasie zu Webbuttons mit GAP ein wenig anregen.

Viel Spaß beim Nachbasteln