Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Button mit Hovereffekt: Alternativen

 

CSS-Button mit Hovereffekt: <TABLE>

CSS-Button mit Hovereffekt: <DIV>

Mit diesem Stylesheet lassen sich einfach und schnell grafische Schalter mit Hover-Effekt erstellen.

Im ersten Beispiel haben wir dazu den <INPUT> Tag verwendet, nun werde ich ihnen 2 Alternativen, mit DIV und TABLE vorstellen.

<TABLE> Tag

1. Beschriftung

Ein "normaler" Grafiklink wie sie ihn vielleicht in HTML gewohnt sind sieht in etwa so aus:

<A HREF="meineSeite.html"><IMG src="meinBild.jpg" width=200 height=45></A>

Daraus wollen wir nun einen Link machen, mit beliebiger Beschriftung. Um eine beliebige Beschriftung einzubauen, muss die Grafik zunächst in den Hintergrund verbannt werden. Das heißt, wir erstellen uns eine "BOX" mit der Grafik als Hintergrundbild. In diese Box und damit "über" die Grafik können wir dann beliebigen Text schreiben:

<A HREF="meineSeite.html">
<TABLE border=0 style="background: url(meinBild.jpg)" width=200 height=45>
 <TBODY><TR><TD align=center valign=middle>
  BESCHRIFTUNG
 </TD></TR></TBODY>
</TABLE>
</A>

2. Hover-Effekt

Um einen Hover-Effekt einzufügen, müssen wir unseren Quellcode zuerst ein wenig abändern. Das Hintergrundbild darf nicht von vorn herein festgelegt sein, sonst können wir es später nicht ändern. Außerdem vergeben wir dem Tag eine Klasse, auf die wir uns später beziehen können. Diese Klasse werde ich in diesem Beispiel sinnigerweise "BUTTON" nennen, sie können allerdings auch einen anderen Namen wählen.

<A HREF="meineSeite.html" class="BUTTON">
<TABLE border=0>
 <TBODY><TR><TD align=center valign=middle>
  BESCHRIFTUNG
 </TD></TR></TBODY>
</TABLE>
</A>

Kommen wir zum CSS: hier müssen wir nun das Hintergrundbild für "Normal" und "Hover"-Zustand festlegen.

<STYLE>

/* Normal */
A.BUTTON TABLE { background: url(button.gif); width: 200px; height: 45px; }

/* Hover */
A.BUTTON:HOVER TABLE { background: url(hover.gif); }

</STYLE>

3. Beispiele

Wenn alles fertig ist können ihre Schalter zum Beispiel so aussehen:

Home
 
Privates
 
Gästebuch

<DIV> Tag

Gehen wir das Ganze nun für DIVs durch. Mit DIVs sparen sich ein wenig Schreibarbeit.

1. Beschriftung

Zur Erinnerung, so sah der Quellcode ursprünglich aus:

<A HREF="meineSeite.html">
<TABLE border=0 style="background: url(meinBild.jpg)" width=200 height=45>
 <TBODY><TR><TD align=center valign=middle>
  BESCHRIFTUNG
 </TD></TR></TBODY>
</TABLE>
</A>

Diesen verkürzen wir nun zu:

<A HREF="meineSeite.html">
<DIV style="background: url(meinBild.jpg); width: 200px; line-height: 45px">
 <CENTER>BESCHRIFTUNG</CENTER>
</DIV>
</A>

Erläuterung: beachten sie, dass wir die Höhenangabe mit der CSS-Anweisung "line-height" und nicht mit "height" realisieren. Das ist notwendig, damit der Text innerhalb der Box mittig dargestellt wird. Das hat allerdings auch zur Folge, dass innerhalb der Box nur für 1 Zeile Platz ist. Wenn sie 2 Zeilen benötigen, müssen sie die Zahl bei "line-height" entsprechend kleiner wählen. Sie können die Höhe zusätzlich über "height" definieren. Das ist jedoch nicht notwendig.

2. Hover-Effekt

Um den Hover-Effekt einzubauen, müssen wir den Quellcode leicht verändern. Wir vergeben (so wie im ersten Beispiel) über das Attribut "CLASS" eine Klasse, um den Tag über Stylesheet direkt ansprechen zu können.

<A HREF="meineSeite.html" class="BUTTON">
<DIV>
  BESCHRIFTUNG
</DIV>
</A>

Kommen wir zum CSS: hier müssen wir nun das Hintergrundbild für "Normal" und "Hover"-Zustand festlegen.

<STYLE>

/* Normal */
A.BUTTON DIV { background: url(button.gif); width: 200px; line-height: 45px; text-align: center; }

/* Hover */
A.BUTTON:HOVER DIV { background: url(hover.gif); }

</STYLE>

3. Beispiel:

So könnte das fertige Ergebnis aussehen:

Home
 
Privates
 
Gästebuch

weitere Beispiele

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: