Header mit Mouseover ♥♥

Heute zeige ich euch, wie man einen Header hinkriegt wie hier: mit Mouseover.

So schwierig wie es aussieht ist es gar nicht, aber jeder Informatiker wird mit mir schimpfen, da es schon in die Kategorie "Bad Coding" (dt.: schlechtes Programmieren) fällt. Es geht auch richtig, dauert aber etwas länger und hat den gleichen Effekt. Also, Hauptsache es funktioniert, nicht?

Los geht's:

1. Header erstellen. Oder besser gesagt, zwei Header. Wie ihr es gestaltet, ist eigentlich egal. Ihr müsst nur darauf achten, dass die zwei Bilder die gleiche Größe haben sollen. Wichtig ist auch, falls ihr den Titel im Header habt, dass die Wörter nicht hin und her springen (es sei denn, es ist gewollt!). Am einfachsten ist es, man erstellt das erste Bild, speichert es als neue Datei (also "speichern unter...") und danach ändert ihr es so ab, dass ihr dann das zweite Bild habt - danach dann richtig speichern. Danach alles hochladen (auf Picasa, Photobucket, TinyPic oder euren Server).

2. Header entfernen. Ja, richtig, ihr müsst euren Header entfernen. Dafür wendet ihr dieses Tutorial an.

3. Mouseover Header einfügen. Dafür geht ihr in Layout und öffnet ganz oben, da wo euer Header einst stand, ein HTML/Javascript-Gadget ein. Titel dürft ihr frei lassen, in das zweite Kästchen fügt ihr folgendes ein:

<style>
#moheader {
...
}
<style>
<div id="moheader">
<a href="DEINLINK">
<img src="URLVONBILD1" onmouseover="this.src='URLVONBILD2'" onmouseout="this.src='URLVONBILD1'"/>
</a>
</div>

4. Anpassen. Die farblich markierten Teile ersetzt ihr mit euren Links. Wenn euer Header genauso breit ist wie euer Blog und alle Abstände perfekt sind, könnt ihr den grauen Teil löschen. Ansonsten könnt ihr hier mit margin, padding, width und height herumspielen.

Irgendetwas passt nicht ganz? Dann fügt folgendes ein (Wert kann variieren!):

Abstand nach oben zu groß? Zwischen #moheader { und }: margin-top:-13px;

Abstand nach unten zu klein? Zwischen #moheader { und }: padding-bottom:13px;

Bilder funktionieren nicht? Überprüfe den Code um den BildURLs. Wurde ein Apostroph verschluckt, fehlt ein Zeichen, ist ein Leerzeichen zu viel drin?

Schlusswort:

Wie ihr bestimmt gemerkt habt, ist dieses Tutorial eigentlich eine Kombination aus zwei bestehenden Tutorials (Header entfernen & Hover-Effekt bzw. Mouseover). Genauso wie in vielen anderen Fällen gilt beim Design basteln die Regel: Not macht erfinderisch - also traut euch ruhig, mehrere Tutorials und euer bisheriges Wissen zu kombinieren :)