Tutorialbeschreibung

Rollover-Effekt bei Grafiken

Rollover-Effekt bei Grafiken

Gerade Anfänger haben das Problem, dass sie nicht wissen, wie sie einen Rollover-Effekt bei Grafiken erstellen können, und greifen daher gerne auf Javascript zurück, welches in diesem Fall jedoch vollkommen überflüssig ist.

Dass das Ganze mit ein paar Zeilen CSS machbar ist, zeige ich in diesem Tutorial. Der Vorteil dieser Methode ist, dass sie ohne Javascript auskommt und somit auch funktioniert, wenn der Nutzer diesen deaktiviert hat.

PS: Da dies mein erstes Tutorial ist, wäre etwas Feedback nicht verkehrt ;-)


Es gibt mehrere Wege, einen Rollover-Effekt zu erstellen. Hier zeige ich euch, wie ihr diesen Effekt ganz einfach mit CSS erstellen könnt. Als Beispiel erstelle ich eine Grafik, die beim Hovern die Hintergrundfarbe wechselt.


Schritt 1

Als Erstes muss die entsprechende Grafik erstellt werden. In diesem Beispiel gehe ich von den Maßen 150px x 150px aus. Öffnet dazu euer Bildbearbeitungsprogramm und erstellt ein neues Dokument mit der gleichen Breite (150px), jedoch der doppelten Höhe (300px). Warum die doppelte Höhe? Nun, die Grafik besteht aus zwei aneinandergehängten Bildern. Durch CSS wird die Grafik um die Höhe des eigentlichen Bildes (150px) verschoben.


Schritt 2

Nachdem wir das Dokument mit den Maßen 150px x 300px erstellt haben, fügen wir das Originalbild mit den Maßen 150px x 150px ein und setzen es nach unten an den Rand.

Bilder


 

Schritt 3

Anschließend fügen wir oben ein weiteres Bild mit den Maßen 150px x 150px ein und setzen es an den oberen Rand.

Zur Erklärung:
Das obere Bild wird im Normalzustand angezeigt. Sobald man mit der Maus über das Bild fährt, wechselt es zum unteren. In diesem Fall tausche ich lediglich die Hintergrundfarbe aus. Ihr könnt aber natürlich jedes beliebige Bild nehmen.

Nachdem ihr das zweite Bild oben eingefügt habt, sollte es etwa so aussehen:

Bilder


Jetzt speichern wir die Grafik unter einem eindeutigen Namen ab (meins heißt "test.jpg") und widmen uns dem Code.


 

Schritt 4

Wir erstellen eine HTML-Datei. Ich verzichte für dieses Beispiel auf eine externe CSS-Datei und füge den Code in den Head.

Dazu definieren wir im Head einen Bereich für CSS, indem wir <style type="text/css"></style> einfügen.

Das Ganze sollte dann wie folgt aussehen:

<html>
<head>
<title>CSS-Tutorial</title>
<style type="text/css">

</style>

</head>

<body>
</body>
</html>


Schritt 5

Nun kommen wir zum eigentlichen Code. Er besteht aus drei Styleangaben (die Klassen könnt ihr natürlich nennen, wir ihr wollt).


1

Zuerst die Klasse "bild". Diese ist wie folgt aufgebaut:
.bild {
    width:150px;
    height:150px;
    display:block;
    margin: 0 auto;
    text-indent:-99999px;
}

Diese Klasse ist quasi der Kasten, in dem eure Grafik angezeigt wird. Daher müsst ihr hier die Maße angeben, die das eigentliche Bild hat. Also in diesem Fall 150px x 150px.

Die Angabe "display:block" ist sehr wichtig und darf nicht vergessen werden, da es ansonsten zu Anzeigefehlern kommt. Die Margin-Angabe ist nicht Pflicht, sollte aber wie oben eingefügt werden.

Da wir die Grafik als Hintergrundbild in CSS laden und nicht in der HTML-Datei über <img.../>, haben wir das Problem, dass wir keinen Alternativtext haben.

Um dieses Problem zu lösen, geben wir dieser Klasse einen negativen text-indent mit einem sehr hohen Wert. Dann ist der Text nachher zwar da, aber für den Benutzer nicht sichtbar.


2

Die zweite Styleangabe ist die Klasse ".bild:hover".

 

.bild:hover {
    background-position: 0 -150px;
}

Hier wird angegeben, um wie viele Pixel die Grafik beim Hovern verschoben wird.

Zur Erinnerung:
Unsere Bilder sind einzeln 150px hoch, die erstellte Grafik 300px. Da wir in der Klasse .bild eine Höhe von 150px definiert haben, wird lediglich die obere Hälfte und somit nur das obere Bild angezeigt. Das untere ist nicht zu sehen.

Durch diese Styleangabe wird die Grafik um 150px verschoben, sodass das obere Bild verschwindet und das untere erscheint.


3

Die dritte und letzte Styleangabe, in meinem Fall nenne ich die Klasse .rolloverbild, lädt die Grafik.

.rolloverbild {
    background: url(test.jpg) no-repeat;
}

 
Hier gebt ihr einfach die url zu eurer Grafik an. Wenn ihr mehrere Grafiken mit den Maßen 150px x 150px mit diesem Effekt auf eurer Seite einbinden wollt, müsst ihr lediglich Schritt 3 wiederholen. Also z.B. eine weitere Klasse namens .rolloverbild2 anlegen.

Euer Quelltext sollte nun folgendermaßen aussehen:

<html>
<head>
<title>CSS-Tutorial</title>
<style type="text/css">
.bild {
    width:150px;
    height:150px;
    display:block;
    margin: 0 auto;
    text-indent:-99999px;
}
.bild:hover {
    background-position: 0 -150px;
}
.rolloverbild {
    background: url(test.jpg) no-repeat;
}
</style>
</head>

<body>
</body>
</html>


Schritt 6

Mit CSS sind wir nun soweit fertig. Kümmern wir uns also um HTML.

Im Body fügen wir einen Link ein. Dieser ist wie folgt aufgebaut: <a href="#"></a>

Diesem Link fügen wir die zwei Klassen .bild und .rolloverbild hinzu. In unserem Fall sieht der Link wie folgt aus:

<a href="#" class="bild rolloverbild">Bildtitel</a>

Die Klasse .bild definiert die Breite und Höhe des angezeigten Bildes. Die Klasse .rolloverbild lädt das Bild. Wenn das Bild als Link dienen soll, fügt ihr anstelle der # einfach den entsprechenden Link ein.

Zum Schluss noch einen Alternativtext einfügen (hier Bildtitel) und wir sind fertig!

Euer Quelltext sollte jetzt so aussehen:
<html>
<head>
<title>CSS-Tutorial</title>
<style type="text/css">
.bild {
    width:150px;
    height:150px;
    display:block;
    margin: 0 auto;
    text-indent:-9999px;
}
    
.bild:hover {
    background-position: 0 -150px;
}

.rolloverbild {
    background: url(test.jpg) no-repeat;
}

</style>
</head>

<body>
<a href="#" class="bild rolloverbild">Bildtitel</a>
</body>
</html>


Öffnet jetzt die HTML-Datei mit einem Browser. Das Bild sollte sich beim Überfahren mit der Maus ändern.

 
Wollt ihr weitere Bilder einfügen, müsst ihr lediglich die Klasse, die das Bild lädt, im CSS definieren, den Link duplizieren und die Klasse .rolloverbild austauschen.

Bsp:
<a href="#" class="bild rolloverbild"></a>
<a href="#" class="bild rolloverbild2"></a>
<a href="#" class="bild rolloverbild3"></a>
...

Bilder


Ich hoffe, dass euch dieses Tutorial gefallen hat und ihr das Gezeigte für euch nutzen könnt.


DVD-Werbung

Passend zum Inhalt empfehlen wir: Responsive Webdesign-Video-Training

Smarter mobil sein! Das Responsive Webdesign-Video-Training bringt dich mit seinen 5,5 Stunden Video-Training auf den mobilen Kurs! Ergänze die responsive Anpassung in deinem Workflow rund ums Webdesign und die Webentwicklung, damit deine Seiten auch auf PC/Tablet und Smartphone eine gute Figur machen!

  • Alle wesentlichen Funktionen für Responsive Webdesign erklärt
  • Optimaler Praxisbezug: Die Umsetzung eines modernen Weblayouts in Responsive Webdesign
  • Praxis-Tipps & hilfreiche Tools zur Webentwicklung

Worauf wartest du? Setz die neuen Webstandards um, denn dieses Training macht mächtig mobil!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von Jim_Bimbel
  • 21.11.2013 - 22:13

Danke für das Tutorial. Würde mich über weitere HTML/CSS-Tutorials freuen...

Portrait von DaKKK
  • 19.01.2014 - 17:05

Es freut mich, dass es dir gefällt. Wenn ich Zeit habe, kommt ein weiteres Tutorial :-) Einen bestimmten Wunsch?

Portrait von niclas123456789
  • 18.03.2013 - 23:57

Wirklich gut anschauliches Tutorial !

Jetzt habe sogar ivh es veratanden vielen dank :)

Portrait von MvG
  • 27.02.2013 - 15:44

Sehr kurzes & verständliches Tutorial! Danke, jetzt mss ich nie wieder auf die Funktion von AdobeDW zurückgreifen. der mir einen der umständlichsten JAVA Code erzeugt..

Was mich noch interessieren würde wäre, wie ich es hinbekomme, einen Status hinzubekommen?
Also wenn ich, sagen wir diese Bilder in der Navigation benutze, der Hoverstatus BLEIBT (sobald die Seite angezeigt wird)?

Wäre über eure Hilfe sehr dankbar!

Gruss
Superlover

Portrait von valentina82
  • 03.01.2013 - 15:19

Klasse Tut :)

Vielen Dank!

Portrait von suessi
  • 07.11.2012 - 15:23

Super erklärt! Danke für dieses verständliche Tutorial! :)

Portrait von bennemann8
  • 08.08.2012 - 19:06

gut,schlicht,einfach erklärt.. ;)
Danke

Portrait von Suzanne_Valadon
  • 06.08.2012 - 22:45

Vielen Dank. Es funktioniert. Ein Flackern kann ich nicht feststellen.

Portrait von cocodina
  • 12.07.2012 - 20:48

Prima, klappt gut... direkt ausprobiert... ich finds praktisch

Portrait von Yetikisdorf
  • 05.04.2012 - 10:10

@ skiron: aber auch so wie du es macht, muß man ein gemeinsames Hintergrundbild für beide Zustände haben und es, wie im Tut richtig beschrieben um die halbe Höhe verschieben, damit es beim ersten Überfahren mit der Maus nicht flackert. Wenn man zwei einzelne Bilder nimmt, wird das Hoverbild erst beim Überfahren mit der Maus geladen. Deshalb flackerts...
Und ob man ein externes Stylsheet nimmt, oder dass CSS in mit ind HTML Datei schreibt ist für die Funktion des Effekts sowieso unbedeutend. Das man bei Webprojekten normal externes CSS benutzt ist hier wohl allen klar.

Wenn du dann noch zusätzliche Links auf der Seite hast, die das Hintergrundbild nicht gebrauchen können, musst du die noch extra stylen. Man spart in deiner Version spätestens dann weder Arbeit noch Code.

Alternative Portrait

User hat PSD-Tutorials.de verlassen

  • 05.04.2012 - 08:33

Nettes Tutorial aber warum so umständlich?
Dieser Effekt lässt sich auch ganz normal in der externen CSS erreichen in dem man dem a-Tag die Eigenschaft display:block zuweist. Bei a:hover wird dann das Bild gewechselt. Wenn man seine Links dazu noch als Liste sortiert kann man bequem auf Position, Grösse etc zugreifen. Für die Navigation sollte zusätzlich ein div-Layer angelegt werden.

Portrait von Yetikisdorf
  • 05.04.2012 - 00:39

@Ploper: Beim erstem Mouseover flackert es in deiner Version kurz, danach funktioniert auch deine Gedankenexperiment. Da aber der im Tut erklärte Effekt gerne für Navigationen benutzt wird, würde ein flackern stören. Daher ist es, so wie im Tut erklärt, vieeel besser.

Portrait von Graf_x
  • 04.04.2012 - 15:31

Interessante Möglichkeit. Muss ich direkt einmal ausprobieren. Danke

Portrait von Quietisolation
  • 04.04.2012 - 12:01

Das Prinzip und die Erklärung ist prima!
Aber wird dadurch nicht die Trennung zwischen Inhalt (HTML-Struktur) und Design (CSS) aufgeweicht?

Portrait von DaKKK
  • 04.04.2012 - 13:01

Ja schon, aber nur ein bisschen. Ich denke, dass das ein guter Kompromiss ist, den ich gerne eingehe, um einen Effekt zu erzielen.

Portrait von DaKKK
  • 04.04.2012 - 09:46

Hi,
so wie ich dich jetzt verstehe, würde das auch funktionieren. Nur bräuchtest du dann für jedes weitere Bild eine neue Klasse .bild, in die du ein Bild lädst.
Durch die gezeigte Methode hast du lediglich eine Standardklasse, in die du einfach das entsprechende Bild lädst. Positiver Nebenaspekt: Dadurch, dass du aus zwei Bildern eines machst, werden auch die HTTP-Requests reduziert. Auch bleibt das Bild beim Wechsel nicht kurz stehen, da der Effekt ja aus einem einzigen Bild besteht und dieses komplett geladen wird.
Gruß DaKKK

Portrait von Ploper
  • 04.04.2012 - 09:29

Interessanter Ansatz, habe das noch nie so versucht.
Ein Gedankenexperiment: Nur die Klassen .bild und .bild:hover würden reichen, indem bei .bild nur das erste Bild als Hintergrund angegeben wird und bei .bild:hover nur das zweite Bild. Sollte gehen, oder?
Allerdings: bleibt vielleicht die Anzeige beim laden des zweiten Bilds kurz stehen?
Gruss Ploper


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×