Mouseover auf Text UND Bild

[Feetschi]

Hallo Leute!

Ich hab auf meiner Website Menüpunkte in der Mitte. Die Kästchen bestehen aus PNG´s und darüber hab ich dann einen Text gelegt.

Ich möchte gerne folgendes haben: http://www.service4medical.at/
Wenn ich über das Bild oder auf "Qualitätssicherung" oder auf "für Ihr Unternehmen kompetent und kompakt" fahre, dann möchte ich das sich das Bild ändert (Symbol sollte dann grün werden). Des weiteren sollte auf allen drei ein Hyperlink sein.

Ich wollte es mit Map machen, aber leider hat das nicht funktioniert.
PNG vom ganzen Kästchen möchte ich auch nicht machen, da die Qualität der Texte einfach schlechter ist.

Vielleicht hat von euch jemand eine Idee.

Danke!
Feetschi

[ichbinich]

Hallo,

Ich möchte gerne folgendes haben: http://www.service4medical.at/
Wenn ich über das Bild oder auf "Qualitätssicherung" oder auf "für Ihr Unternehmen kompetent und kompakt" fahre, dann möchte ich das sich das Bild ändert (Symbol sollte dann grün werden).
Des weiteren sollte auf allen drei ein Hyperlink sein.

Du hast ein strukturelles Problem. Jede dieser 3 Boxen sollte ein Element sein, was dann den entsprechenden Inhalt hat. Dabei ist es nicht notwendig, dass der dunkle Hintergrund eine Grafik ist, dafür kannst du einfach eine Hintergrundfarbe definieren. Der Einfachheit halber ist dieses Element dann dein <a>-Element, welches du per display:block auf die gewünschte Breite  und Höhe ausdehnst, mit der Grafik (nur das jeweilige Symbol!) als Hintergrundbild und dem kompletten Text. Diesem Link gibst du dann ein :hover und tauschst das Hintergrundbild aus.

vg ichbinich

[ichbinich]

Hallo,

ach ja, für die Hintergrundbilder nutzt du dann am besten CSS Sprites.

vg ichbinich

[Gunnar Bittersmann]

@@ichbinich:

nuqneH

ach ja, für die Hintergrundbilder nutzt du dann am besten CSS Sprites.

Gut – vielleicht. Am besten – nein.

Was sollte an einem HTTP-Request besser sein als an gar keinem? Was sollte an Sprites besser sein als an Inline-Images?

Qapla'

[bubble]

Was sollte an einem HTTP-Request besser sein als an gar keinem? Was sollte an Sprites besser sein als an Inline-Images?

Vielleicht, dass inline-images den Code aufblähen und das Bild nicht mehr gecacht wird sondern die Seite?
Wenn der Cache für die Seiten ausgelaufen ist, werden die Bildinformationen für jede Seite neu mit geladen.
Das würde bei einer direkten Verlinkung zu einer eigenständigen Resource (die Bild-Datei) nicht passieren.

MfG
bubble

[Gunnar Bittersmann]

@@bubble:

nuqneH

Wenn der Cache für die Seiten ausgelaufen ist, werden die Bildinformationen für jede Seite neu mit geladen.

Inline-Images stehen nicht im Seitencode (HTML).

Das würde bei einer direkten Verlinkung zu einer eigenständigen Resource (die Bild-Datei) nicht passieren.

Inline-Images _stehen_ in einer einer eigenständigen Resource: dem Stylesheet; werden also mit diesem gecachet.

Qapla'

[bubble]

Inline-Images _stehen_ in einer einer eigenständigen Resource: dem Stylesheet; werden also mit diesem gecachet.

Ich böser Bub hab mir nur den ersten deiner Links angeguckt und nicht (weiter) gedacht.

Von daher find ich die inline-Images jetzt doch recht toll :3

MfG
bubble

[Feetschi]

Hallo,

ach ja, für die Hintergrundbilder nutzt du dann am besten CSS Sprites.

vg ichbinich

Hallo,

wau danke für den Tipp funktioniert super.
Eine Frage hätt ich noch.
Ich hab es geschafft, wenn man auf das Kästchen fährt, dass das Symbol dann grün wird und alles ein Link ist. Aber wie kann ich es machen, das ich nur die Position vom Text innerhalb des Kästchen ändere?

lg Feetschi

[ichbinich]

Hallo,

Ich hab es geschafft, wenn man auf das Kästchen fährt, dass das Symbol dann grün wird und alles ein Link ist. Aber wie kann ich es machen, das ich nur die Position vom Text innerhalb des Kästchen ändere?

Wie möchtest du denn die Position ändern? Beim Überfahren mit der Maus?

vg ichbinich

[Feetschi]

Hallo,

Ich hab es geschafft, wenn man auf das Kästchen fährt, dass das Symbol dann grün wird und alles ein Link ist. Aber wie kann ich es machen, das ich nur die Position vom Text innerhalb des Kästchen ändere?

Wie möchtest du denn die Position ändern? Beim Überfahren mit der Maus?

vg ichbinich

ich hab die Datei nochmals hochgeladen: http://www.service4medical.at/
das ist genau was ich will, nur mein Problem ist, dass sich alle text in der ersten box befinden, aber ich noch nicht weiß warum, und ich will diese ja aufteilen pro box. wenn ich diese weg geben und nur den ersten steh lassen, dann passt alles perfekt.

lg feetschi

[ichbinich]

Hallo,

ich hab die Datei nochmals hochgeladen: http://www.service4medical.at/
das ist genau was ich will, nur mein Problem ist, dass sich alle text in der ersten box befinden, aber ich noch nicht weiß warum, und ich will diese ja aufteilen pro box. wenn ich diese weg geben und nur den ersten steh lassen, dann passt alles perfekt.

Das kommt daher, dass du immer noch zu viele Elemente hast.
Du brauchst nur ein <a>-Element:

<a id="menue1" class="menue" href="#">  
  <span>Qualitätssicherung</span>  
  <span>für Ihr Unternehmen<br>kompetent und kompakt</span>  
</a>

Die <span> kannst du dann mit

.menu1 span { /* erstes span */ }  
.menu1 span + span { /* zweites span */ }

formatieren

Und: du brauchst wirklich nur die kleinen Icons als Grafiken!

vg ichbinich

[Feetschi]

Hallo,

danke funktioniert jetzt und schaut gleich zusammengeräumter aus. Vielen dank nochmals.

lg Feetschi