Sidr
PSD-Tutorials.de

Lieber Gast,

wir freuen uns, dass du zu den großen Geheimnissen der kreativen Anziehungskraft vorstoßen willst. Der Schlüssel dazu liegt in unserem Mitgliederbereich. Schließ auch du dich uns an und werde Teil einer aufgeschlossenen Community voller Ideen und Illusionen. Wie das geht, ist kein Geheimnis:

Jetzt kostenlos registrieren!

Klipp und klar im Vorteil: Du und wir und viel, viel mehr

So leicht es ist, mitten in unserer Community zu sein, so schnell eröffnet sich dir das gesamte Drumherum. Verschaff dir schon jetzt einen Überblick:

  • Hoher Wirkungsgrad in den Disziplinen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Gestaltung mit Cinema 4D & Co. …
  • Über 3.500 Tutorials – inklusive druckbaren PDF-Dateien, teils mit entsprechenden Arbeitsmaterialien
  • Mehr als 2.700 Video-Trainings – direkt gestreamt und per Download
  • Rund 2.400 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co.
  • Lebendiges Forum mit blitzschnellen Antworten, die ins Schwarze treffen
  • Sicherheit für deine Daten. Alles bleibt unter uns und wird nicht weitergegeben! Deine Mitgliedschaft kannst du jederzeit problemlos löschen.
  • Hol dir zusammen mit unserem Newsletter gratis das neue Selection-Training – ein digitales und umfangreiches Menü mit nahrhaftem Kraftfutter zu all unseren Lernprogrammen.

Schnupperkurse für Gäste

Du willst uns schon gern mal besuchen, deine Jacke aber noch anbehalten? Teste uns ruhig. Wir zeigen dir in ausgesuchten Tutorials und Video-Trainings, dass es sich lohnt, dein Stirnrunzeln – und deine Jacke – abzulegen.

Jetzt kostenlos registrieren!

Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

Verwandle deine Stylevorlage! Dieses Webdesign-Training für Photoshop stellt mit seinen 32 Stunden Video-Training und diversen Text-Workshops eine breite Basis dar, um deine Inhalte meisterhaft ins Web zu transportieren!

  • Webdesign mit Photoshop: alle erstellten Layouts mit PSD-Arbeitsdateien
  • Umsetzung erstellter Weblayouts in HTML/CSS und jQuery
  • SEO-Tipps vom Feinsten zur Suchmaschinenoptimierung

Bring Pep ins Web! Mit diesem Training erhältst du für bestes Webdesign das richtige Know-how!

Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von Jim_Bimbel

    Jim_Bimbel

    21.11.2013 - 22:13

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

    • Portrait von DaKKK

      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

    niclas123456789

    18.03.2013 - 23:57

    Wirklich gut anschauliches Tutorial !

    Jetzt habe sogar ivh es veratanden vielen dank :)

  • Portrait von MvG

    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

    valentina82

    03.01.2013 - 15:19

    Klasse Tut :)

    Vielen Dank!

  • Portrait von suessi

    suessi

    07.11.2012 - 15:23

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

  • Portrait von bennemann8

    bennemann8

    08.08.2012 - 19:06

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

  • Portrait von Suzanne_Valadon

    Suzanne_Valadon

    06.08.2012 - 22:45

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

  • Portrait von cocodina

    cocodina

    12.07.2012 - 20:48

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

  • Portrait von Yetikisdorf

    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.



    geändert von Yetikisdorf am 05.04.2012 - 10:17
  • Portrait von skiron

    skiron

    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.



    geändert von skiron am 05.04.2012 - 08:35
  • Portrait von Yetikisdorf

    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

    Graf_x

    04.04.2012 - 15:31

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

  • Portrait von Quietisolation

    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

      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

    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



    geändert von DaKKK am 04.04.2012 - 09:56
  • Portrait von Ploper

    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.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.

vBulletin 0.022 ZF-App 0.588 Total 0.609