HTML Logo Atlas

[Chrisel]

Hallo alle zusammen,
ich stehe gerade vor einer kleinen aufgabe bei der man mit gegebenen Materialien eine Homepage statisch nachbauen muss und zwar ausschließlich mit HTML5 und CSS. Auf der vorgegebenen Website ist ein Logo oben im Header. Wenn man mit der Maus darüber fährt entsteht ein Hover-Effekt und das Bild wechselt zu einem zweiten Bild solange die maus darüber ist. Im Material sind aber beide Bilder - also das Standard Bild und das was kommt wenn man mit der maus darüber fährt - in einer PNG datei untereinander. Also bsw so:

(Um es am Beispiel zu beschreiben: Standardmäßig wird die 1 als Bild/Logo angezeigt. Fährt man mit der maus auf die 1, so ändert das bild sich zur 2. Fährt man wieder raus wird das Standardbild angezeigt.)

So also mit Javascript etc. wüsste ich wie ich das Problem angehen würde, aber ich habe leider keine ahnung wie ich mit HTML5 und CSS sowas hinkriegen kann und ich finde auch leider nichts bzw weiß nicht wonach ich suchen soll. Könnt ihr mir da vielleicht weiterhelfen?

Gruß
Chrisel

 

[Madman1209]

Hi,

ich stehe gerade vor einer kleinen aufgabe

Hausaufgabe? Übungsaufgabe? Ist ja wohl kaum was anderes oder?

VG,
Mad

 

[Chrisel]

Es handelt sich um eine Übungsaufgabe. Wir sollen langsam in HTML5 reinkommen und später kommt php, ajax usw. noch dazu. Aber die erste Aufgabe wurde extra auf HTML und CSS beschränkt damit wir uns damit erstmal befassen.

 

[rast]

Hi Chrisel,

probier mal als Stichwort: CSS Image Sprites, oder auch CSS Sprites.

auf Englisch gibt es hier: www.w3schools.com/css/css_image_sprites.asp eine ganz gute Erklärung / Anleitung.

Gruß rast

 

[powerfx]

Du hast irgendein Element (div o.ä.), das die Größe von einem Teilbild hat und innerhalb dieses Elements positionierst du das gesamte Bild entsprechend (je mit und ohne hover).

Könnte klappen...

 

[moshimoshi]

http://www.youtube.com/results?search_query=CSS+Image+Sprites

Google viele Anleitungen und so.

http://www.youtube.com/watch?v=g7enSYVIGB4

 

[Chrisel]

Ahh!! Die Image Sprite Seite ist genau das was ich gesucht habe. Vielen Danke für die Hilfe! Hat alles geklappt

Gruß
Chrisel