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 23 Kommentare

  1. Danke :) werde ich auch ausprobieren.

    LG (:

    AntwortenLöschen
  2. 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

    AntwortenLöschen
    Antworten
    1. Dazu gibt es ein Tutorial, ist noch auf der Startseite :)

      Löschen
  3. 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?

    AntwortenLöschen
    Antworten
    1. http://www.copypastelove.de/2013/05/aktuelles-problem-header-werden-grau.html

      Löschen
  4. hey ich bin ganz neu kannst du mir vllt helfen?:)

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

    AntwortenLöschen
    Antworten
    1. Oh, ok hat geklappt mit text-align:center; :)
      yay! Danke fürs tutorial!

      Löschen
    2. An welcher Stelle im Code hast du das eingegeben? :)

      Löschen
  6. Was ist mit "DeinemLink" gemeint, also welchen soll man da einfügen?

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

      Löschen
  7. Ich hab leider keine Ahnung vom blog deisgn kann mir vlt jmd helfen? Ich krieg das immer noch nicht hin. :(

    AntwortenLöschen
  8. hilfe! komme bei schritt 3 nicht mehr weiter! habe jetzt nur noch ein graues bild oben!

    AntwortenLöschen
  9. Oh, wie praktisch :D
    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.

    AntwortenLöschen
  10. 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

    AntwortenLöschen
  11. Was ist mit "Dein Link" gemeint ?

    AntwortenLöschen
  12. Wow so toll erklärt! Vielen Dank, ich bin völlig begeistert von Deinem Blog. :) LG,

    http://marenkruth.blogspot.de

    AntwortenLöschen
  13. 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! :)

    AntwortenLöschen
  14. 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

    AntwortenLöschen
  15. 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?

    AntwortenLöschen
  16. 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?

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.