Tipps & Tutorials, tutorial

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 🙂

23 Comments

  1. Danni

    18. May 2013 at 17:04

    Coole Sache 🙂
    Liebe Grüße, Danni

  2. Beate

    19. May 2013 at 8:57

    Danke 🙂 werde ich auch ausprobieren.

    LG (:

  3. Emell

    22. May 2013 at 18:11

    Cool! Danke für das tolle Tutorial Mira!
    Eine kleine Frage hätte ich da noch.. kann man anstatt ein Gadget einzufügen auch den Mouseover-Code direkt in den Layout-HMTL-Code einfügen ?

    -emell

    1. Mira Ho

      5. June 2013 at 11:35

      Dazu gibt es ein Tutorial, ist noch auf der Startseite 🙂

  4. Marlene Ba

    26. May 2013 at 13:47

    Ich habe ein Problem, das hat nicht hiermit zutun, aber ich dachte, vielleicht kannst du mir helfen:
    Ich habe einen weißen Header mit GIMP erstellt, ihn dann übers Layout hochgeaden, und dann wird er grau?!
    Wieso? und was kann ich dagegen machen?

  5. Seda Kilic

    4. June 2013 at 19:19

    hey ich bin ganz neu kannst du mir vllt helfen?:)

  6. Charlotte H.

    13. June 2013 at 7:09

    Wie kann man den Header jetzt zentrieren? ich bekomm das nicht so wirklich hin. Auch nicht mit margin-right:-13px. Oder jegliche andere Zahl…

    1. Charlotte H.

      13. June 2013 at 7:14

      Oh, ok hat geklappt mit text-align:center; 🙂
      yay! Danke fürs tutorial!

    2. Ann-Kathrin Wagner

      21. August 2013 at 13:44

      An welcher Stelle im Code hast du das eingegeben? 🙂

  7. Katarina Letuschi

    26. June 2013 at 13:55

    Was ist mit "DeinemLink" gemeint, also welchen soll man da einfügen?

    1. Katarina Letuschi

      26. June 2013 at 14:08

      er zeigt mir das Bild leider nicht an:( Wie mach ich dass es mir angezeigt wird?:) Bitte bitte um Hilfe:))))
      http://sillygeeseandhorseflies.blogspot.de/

  8. kathipyjamarama

    1. July 2013 at 17:29

    Ich hab leider keine Ahnung vom blog deisgn kann mir vlt jmd helfen? Ich krieg das immer noch nicht hin. 🙁

  9. natalie

    7. August 2013 at 12:54

    hilfe! komme bei schritt 3 nicht mehr weiter! habe jetzt nur noch ein graues bild oben!

  10. FreoBo

    13. August 2013 at 20:02

    Oh, wie praktisch 😀
    Hab den Code allerdings nicht in ein Gadget eingefügt, sondern direkt in die HTML-Datei, das hab ich einfach lieber! Danke für die Erklärung.

  11. Sabrina Wortmann

    8. January 2014 at 22:00

    Hallo!
    Erstmal: Sehr hilfreiches Tutorial, habs sofort in mein Blog integriert 🙂
    Jetzt hab ich aber mal ne Frage: Die Webversion meines Blogs finde ich ja eigentlich ganz gut…. Nur dadurch, dass ich jetzt den eiegtnlichen Header "Invisible" gemacht habe, ist auf der mobilen Seite einfach gar nichts… Kein Text… Kein Bild… Einfach nichts 🙁
    Kann ich das ändern?

    LG, Sabrina

  12. Reike

    18. January 2014 at 17:28

    Was ist mit "Dein Link" gemeint ?

  13. maren kruth

    31. January 2014 at 11:08

    Wow so toll erklärt! Vielen Dank, ich bin völlig begeistert von Deinem Blog. 🙂 LG,

    http://marenkruth.blogspot.de

  14. ShiYu H-M

    10. February 2014 at 20:03

    Hallo, irgendwie funktioniert das bei mir nicht. Könnt ihr das alte Tutorial nicht alternativ wieder hoch stellen, da ich nicht weiß, wie ich meinen Header löschen kann.
    Ohne das Löschen des Headers geht es nicht. Danke! 🙂

  15. Olivia

    4. January 2015 at 11:12

    Ich bin ganz neu in der Blogger-Welt. Habe leider nicht so viel Ahnung von HTML usw… Ich bräuchte eher mal ein Tutorial, wie man einen Header in den HTML einfügt. Ich habe den Header ins Layout eingefügt, aber er wird einfach nicht angezeigt (ich nutze Minima)… Könnte wer sich das mal anschauen und sagen, was ich alles dazu machen muss? lullaby-diy.blogspot.com

  16. Nana Evilcherry

    14. October 2016 at 14:04

    wenn das noch jemand liest?! ich habe das Problem, dass wenn ich den "style" teil eingebe – alles gelöscht wird und nur eckigeklammer style> eckigeklammer style>'' im HTML-Kästchen steht und in Folge dessen natürlich auch kein Bild bleibt… dabei hab ich den Text kopiert… irgendwelche Ideen?

  17. Nana Evilcherry

    14. October 2016 at 14:29

    wenn das noch jemand liest?! ich habe das Problem, dass wenn ich den "style" teil eingebe – alles gelöscht wird und nur eckigeklammer style> eckigeklammer style>'' im HTML-Kästchen steht und in Folge dessen natürlich auch kein Bild bleibt… dabei hab ich den Text kopiert… irgendwelche Ideen?

Leave a Reply