Rollover-Button

Verfasst von Alice am 10.08.2008 - wurde schon 15396 mal gelesen

Kategorie: Html/Css

Bewertung:

29x bewertet

Schwierigkeit: einfach
Kommentare: [ 3 ]

Tag - Schlagwort HTML Button Images Rollover

Rollover-Button - Tutorial

Es kam die Frage auf, wie man eine Rollover-Button erstellt...

Mit CSS geht dies kinderleicht :)

Beispiel ansehen

Wir benoetigen 2 Grafiken, die eine Grafik wird standardmaessig angezeigt, die andere kommt nur zum Vorschein, wenn man mit der Maus ueber den Link faehrt ...
Beide Grafik sollten gleich Hoch/Breit sein!

Ich nehme diese 2 Grafiken

Normal:

Hover:

Unserem Link, der den Rollover-Effekt erhalten soll, weisen wir eine id namens 'rollover' zu, damit wir die Formatierung per CSS, gezielt nur fuer diesen einen Link erhalten.
Die id dient zur eindeutigen Identifiktion und darf somit nur einmal im gesamten HTML Dokument vorkommen!

<a href="http://design-grafixx.com" id="rollover">&nbsp;</a>

Das CSS fuer diesen Link sieht wie folgt aus:

a#rollover{ 
    width: 156px;  		/* Breite */
    height: 51px; 		/* Hoehe */
	display: block;		/* Element wird als Block-Element dargestellt */
	outline: none; 		/* unterdrueckt gestrichelten Rahmen */
    background: url(normal.jpg) no-repeat; /* Hintergrundgrafik */
}

a#rollover:hover { 
	background: url(hover.jpg) no-repeat; /* Hintergrundgrafik */
}

Mit dem Selector a#rollover bestimmen wir die generelle Formatierung unseres Links.
Die Eigenschaft width gibt an wie breit unsere Link sein soll, hier muss die Breite der verwendeten Grafik angegeben werden.
Mit height geben wir an, wie hoch unser eLink sein soll, hier muss die Hoehe der verwendeten Grafik angegeben werden.
display: block bestimmt, dass unser Link als Block-Element dargestellt wird und somit die Hoehe und Breite richtig interpretiert.
outline: none; ist dazu da um die Konturlinie zu unterdruecken, die bei manchen Browsern fuer aktive Links(nach dem Klick) erscheint
background: url(normal.jpg) no-repeat; definiert das Hintergrundbild unseres Links, hier muss die Url der verwendeten Grafik angegeben werden,
der wert no-repeat sorgt dafuer, dass das Hintergrundbild nicht wiederholt wird

Mit dem Selector a#rollover:hover bestimmen wir die Formatierung fuer unseren Link, wenn man mit der Maus drueber faehrt.
Hierbei greifen wir auf die dynamische Pseudo-Klasse :hover zurueck, mit der man eine Formatierung eines Elements, das gerade mit der Maus ueberfahren wird, bestimmen kann.

Unser Selector a#rollover:hover enthaelt nur die Eigenschaft background welches unser Hintergrundbild festlegt, dass nur zum Vorschein kommt, wenn man mit der Maus ueber unseren Link faehrt.
Die anderen Formatierungsangaben haben wir ja schon im Selector a#rollover hinterlegt, die automatisch dann vom Selector a#rollover:hover uebernommen werden

In einem HTML-Dokument koennte das Ganze dann wie folgt angewandt werden ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>Rollover mit CSS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Tutorial, (x)HTML, CSS, Rollover, Alice, Grafixx" />
<meta name="description" content="Beispielseite zum Tutorial CSS Rollover | Alice-Grafixx.de" />

<style type="text/css">
body{
	margin: 10px;
	text-align: center;
	background: #ddd;
	font: normal 0.9em Tahoma, sans-serif;
}

#ram{
	text-align: left;
	border: 1px solid #eee;
	margin: 10px auto;
	padding: 15px;
	width: 750px;
	background: #fff;
}

h1{
	font-size: 1.4em;
	color: #758896;
}

a{
	float: left;
}

/* erster Button 
----------------------------------------------------------------------- */
a#rollover{ 
    width: 156px;  		/* Breite */
    height: 51px; 		/* Hoehe */
	display: block;		/* Element wird als Block-Element dargestellt */
	outline: none; 		/* unterdrueckt gestrichelten Rahmen */
    background: url(normal1.jpg) no-repeat; /* Hintergrundgrafik */
}

a#rollover:hover { 
	background: url(hover1.jpg) no-repeat; /* Hintergrundgrafik */
}

/* zweiter Button 
----------------------------------------------------------------------- */
a#rollover1{ 
    width: 156px;  		/* Breite */
    height: 51px; 		/* Hoehe */
	display: block;		/* Element wird als Block-Element dargestellt */
	outline: none; 		/* unterdrueckt gestrichelten Rahmen */
    background: url(normal2.jpg) no-repeat; /* Hintergrundgrafik */
}

a#rollover1:hover { 
	background: url(hover2.jpg) no-repeat; /* Hintergrundgrafik */
}

/* dritter Button 
----------------------------------------------------------------------- */
a#rollover2{ 
    width: 156px;  		/* Breite */
    height: 51px; 		/* Hoehe */
	display: block;		/* Element wird als Block-Element dargestellt */
	outline: none; 		/* unterdrueckt gestrichelten Rahmen */
    background: url(normal3.jpg) no-repeat; /* Hintergrundgrafik */
}

a#rollover2:hover { 
	background: url(hover3.jpg) no-repeat; /* Hintergrundgrafik */
}
</style>

</head>

<body>

<div id="ram">
<h1>Rollover-Buttons mit CSS</h1>

<p> <a href="http://alice-grafixx.de" id="rollover"></a> 	   
	<a href="http://unnecessary.de" id="rollover1"></a>  	   
	<a href="http://design-grafixx.com" id="rollover2"></a>

<br /><br />

</p>


</div>

</body>
</html>

Hinweis

Wenn man aber nun eine komplette Navigation mit einem Rollover-Effekt bestuecken moechte, muesste man fuer jeden einzelnen Button eine eigene CSS Regel erstellen,
bei ein paar Buttons mag dass ja noch gehen, aber bei mehreren wird die CSS-Datei sehr lang ...

Deshalb sollte man hier lieber die Button-Grafiken unbeschriftet lassen und anstatt die Links mit einer id, lieber mit einer Klasse(class) ansprechen.
Eine Klasse kann, im Gegensatz zu einer id, mehrfach in einem HTML-Dokument verwendet werden.

Und wie funktioniert dass nun mit class?

Beispiel ansehen

Wir benoetigen hierzu wieder 2 Grafiken, unbeschriftet wohl gemerkt...

Ich nehme diese hier
Normal:

Hover:

Alle Links, die mit dem Rollover-Effekt ausgestattet werden sollen, bekommen nun eine class namens 'rollover' zugewiesen

<a href="http://design-grafixx.com" class="rollover">Design-Grafixx</a>
<a href="http://alice-grafixx.de" class="rollover">Alice-Grafixx</a>
<a href="http://unnecessary.de" class="rollover">Unnecessary</a>
<a href="http://sweet-pearls.com" class="rollover">Sweet-Pearls</a>

Das CSS fuer alle Links mit der class 'rollover' sieht wie folgt aus:

a.rollover{ 
    padding-top: 17px;							/* Innenabstand des Elements von oben */
    width: 156px;  								/* Breite */
    height: 35px; 								/* Hoehe */
	display: block;								/* Element wird als Block-Element dargestellt */
	outline: none; 								/* unterdrueckt gestrichelten Rahmen */
    background: url(grafik1.jpg) no-repeat; 	/* Hintergrundgrafik */
    font-size: 1.0em;							/* Schriftgroesse */
    font-weight: bold;							/* Schriftdicke */
    font-family: Arial, Tahoma, sans-serif;		/* Schriftart */
    color: #fff;								/* Textfarbe */
    text-align: center;							/* Textausrichtung */
    text-decoration: none;						/* Link wird nicht unterstrichen */
}

a.rollover:visited { 
    color: #B4B5B9;								/* Schriftfarbe */
	background: url(grafik2.jpg) no-repeat; 	/* Hintergrundgrafik */
}

a.rollover:hover { 
    color: #CFE4FF;								/* Schriftfarbe */
	background: url(grafik2.jpg) no-repeat; 	/* Hintergrundgrafik */
}

Der Selector a.rollover bestimmt die generelle Formatierung unserer Links mit der class 'rollover'
Die Eigenschaft padding-top bestimmt mit ihrem Wert den Innenabstand von Oben des Elementes,
alles was sich also im <a> Tag befindet, hier ist es der Linktext, wird mit einem Abstand von 17 Pixel zum oberen Rand, des Elements angzeigt.

Die Eigenschaft width gibt an wie breit unsere Link sein soll, hier muss die Breite der verwendeten Grafik angegeben werden.
Mit height geben wir an, wie hoch unsere Links sein sollen, hier muss die Hoehe der verwendeten Grafik angegeben werden.

Wichtig!

Da wir aber die Schrift mittels padding-top ausgerichtet haben,
muessen wir den Wert von padding-top von der Hoehe der Grafik abziehen,
sonst waer der Link hier nicht 51Pixel hoch sondern 51 Pixel + die 17 Pixel vom padding-top!

Eine genau Erklaerung zur Berechnung der korrekten Breiten- Hoehenangabe eines Elementes, kann auf SELFhtml nachgelesen werden ...

display: block bestimmt, dass unser Link als Block-Element dargestellt wird und somit die Hoehe und Breite richtig interpretiert.
outline: none; ist dazu da um die Konturlinie zu unterdruecken, die bei manchen Browsern fuer aktive Links(nach dem Klick) erscheint
background: url(grafik1.jpg) no-repeat; definiert das Hintergrundbild unserer Links, hier muss die Url der verwendeten Grafik angegeben werden,
der wert no-repeat sorgt dafuer, dass das Hintergrundbild nicht wiederholt wird
font-size: 1.0em; definiert die Schriftgroesse
font-weight: bold; definiert die Schriftdicke
font-family: Arial, Tahoma, sans-serif; definiert die Schriftart, hierbei wird die Schriftart die an erster Stelle steht zuerst vom Browser genutzt, wenn diese nicht auf dem Client-Rechner vorhanden ist die naechste usw. ...
color: #fff; bestimmt die Textfarbe, der Wert #fff ist eine verkuerzte Variante des 6-stelligen Hexadezimal-Codes von #ffffff und steht fuer weiss
Mit text-align: center; richten wir den Text mittig aus ...
Und mittels text-decoration: none; unterdruecken wir die automatische unterstreichung eines Links

Mit dem Selector a.rollover:visited bestimmen wir die Formatierung fuer einen Link mit der class='rollover', wenn dieser bereits besucht wurde
Hierbei greifen wir auf die dynamische Pseudo-Klasse :visited zurueck, mit der man eine Formatierung eines Links bestimmen kann, wenn dieser bereits besucht wurde (im Cache des Browsers gespeichert ist).
Wir verwenden hier nur die Eigenschaft color und background, ein schon besuchter Link bekommt also eine andere Schriftfarbe und die selbe Hintergrundgrafik wie der Link, wenn er mit der Maus ueberfahren wird.

Mit dem Selector a.rollover:hover bestimmen wir die Formatierung fuer einen Link mit der class='rollover', wenn man mit der Maus drueber faehrt.
Hierbei greifen wir auf die dynamische Pseudo-Klasse :hover zurueck, mit der man eine Formatierung eines Elements, das gerade mit der Maus ueberfahren wird, bestimmen kann.
Hier geben wir auch wie bei a.rollover:visited schon zuvor nur Hintergrundbild und Textfarbe an ...

In einem HTML-Dokument koennte das Ganze dann wie folgt angewandt werden ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>Rollover mit CSS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Tutorial, (x)HTML, CSS, Rollover, Alice, Grafixx" />
<meta name="description" content="Beispielseite zum Tutorial CSS Rollover | Alice-Grafixx.de" />

<style type="text/css">
body{
	margin: 10px;
	text-align: center;
	background: #ddd;
	font: normal 0.9em Tahoma, sans-serif;
}

#ram{
	text-align: left;
	border: 1px solid #eee;
	margin: 10px auto;
	padding: 15px;
	width: 750px;
	background: #fff;
}

h1{
	font-size: 1.4em;
	color: #758896;
}

a{
	float: left;
}

/* Buttons 
----------------------------------------------------------------------- */
a.rollover{ 
    width: 156px;  								/* Breite */
    height: 34px; 								/* Hoehe */
    padding: 17px 0px 0px 0px;					/* Innenabstand */
	display: block;								/* Element wird als Block-Element dargestellt */
	outline: none; 								/* unterdrueckt gestrichelten Rahmen */
    background: url(grafik1.jpg) no-repeat; 	/* Hintergrundgrafik */
    font-size: 1.0em;							/* Schriftgroesse */
    font-weight: bold;							/* Schriftdicke */
    font-family: Arial, Tahoma, sans-serif;		/* Schriftart */
    color: #fff;								/* Schriftfarbe */
    text-align: center;							/* Textausrichtung */
    text-decoration: none;						/* Link wird nicht unterstrichen */
    
}

a.rollover:visited { 
    color: #B4B5B9;								/* Schriftfarbe */
	background: url(grafik2.jpg) no-repeat; 	/* Hintergrundgrafik */
}

a.rollover:hover { 
    color: #CFE4FF;								/* Schriftfarbe */
	background: url(grafik2.jpg) no-repeat; 	/* Hintergrundgrafik */
}
</style>

</head>

<body>

<div id="ram">
<h1>Rollover-Buttons mit CSS</h1>

<p><a href="http://design-grafixx.com" class="rollover">Design-Grafixx</a>
<a href="http://alice-grafixx.de" class="rollover">Alice-Grafixx</a>
<a href="http://unnecessary.de" class="rollover">Unnecessary</a>
<a href="http://sweet-pearls.com" class="rollover">Sweet-Pearls</a>

<br />
<div style="clear: left;background: #000;">huhuh</div>

<br />

</p>


</div>

</body>
</html>

Beispiel ansehen

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...