Probleme bei Hover Effekt mit Bildern

[Mike_K]

Ich habe zwei Probleme mit dem Hover-Effekt:

1) Ich habe eine Navi mit einer Schriftart die keine Web-Standard Schrift ist. Also möchte ich die Buttons als einzelne Bilder einfügen und verlinken. Sie sollen aber einen Hover-Effekt haben, der mit einem zweiten Bild realisiert werden soll. Also Bild A ist das Standardbild, Bild B soll beim Mouseover erscheinen.

Wie kann ich das realisieren, ich habe keinen Plan? Ich wäre jetzt hingegangen, hätte ein DIV "Button1" gemacht, dem das Background Image Bild A gegeben aber dann würde mein Latein auch aufhören.

Was muss ich tun, damit ich den Hovereffekt hinbekomme? und
Wie bekomme ich es hin, dass das DIV ein klickbarer Link wird?


2) Bei einer Drop-Down Navi habe ich einen Link für a als auch a:hover formatiert. Ausserdem soll ein Hintergrundbild erscheinen wenn das Mouseover stattfindet. Also gebe ich ein Hintergrundbild an. Dies wird aber nur auf der Breite und Höhe angezeigt wie auch der Text des Links ist, soll aber eigentlich viel größer sein.

Hat einer eine Idee woran das liegen kann. Ich würde gerne ein Beispiel hochladen, habe die Dateien aber in der Firma liegen lassen.

LG und Danke.

Mike

 

[4uwak]

AW: Probleme bei Hover Effekt mit Bildern

ja also in HTML ist es ganz easy versuch mal das

<a href="index.html"><img src="Bilder/index_03.jpg" onMouseOver=src="Bilder/index_03_over.jpg" onMouseOut=src="Bilder/index_03.jpg" alt="" width="101" height="59" border="0"></a>

 

[sokie]

AW: Probleme bei Hover Effekt mit Bildern

Bei einer Drop-Down Navi habe ich einen Link für a als auch a:hover formatiert. Ausserdem soll ein Hintergrundbild erscheinen wenn das Mouseover stattfindet. Also gebe ich ein Hintergrundbild an. Dies wird aber nur auf der Breite und Höhe angezeigt wie auch der Text des Links ist, soll aber eigentlich viel größer sein.

Grundsätzlich kannst du auch <a>elemente per display:block und höhe und breite darstellen, und das hintergrundbild bedeckt den gesamten Bereich.

Das kannst du auch für die Navigation aus der ersten Frage so machen. Interessant ist vielleicht an der Stelle die Verwendung von css-Sprites damit beim Hovern keine Pause entsteht, in der der das hoverbild geladen werden müsste.

 

[mrbuff76]

AW: Probleme bei Hover Effekt mit Bildern

Zu deinem ersten Problem:

Warum verwendest du nicht auch hier die Pseudo-Klasse hover?
Da tauscht du dann im CSS einfach das background-image aus.
Das funktioniert genauso, wie bei einem normalen a-Tag.

Zum zweiten Problem:

Siehe mein Vorredner... Höhe und Breite des a-Tags angeben (würde den Abmessungen des Hintergrundbildes entsprechen) und display auf block oder inline-block...

 

[sokie]

AW: Probleme bei Hover Effekt mit Bildern

PS:

Wie bekomme ich es hin, dass das DIV ein klickbarer Link wird?

zum besseren Verständnis:ein a element mit der css-eigenschaft display:block ist vom Effekt her wie ein div (nur eben bereits mit der gewünschten hyperlink funktionalität)

 

[Mike_K]

Danke!

Ich danke euch erstmal für eure wertvollen Tipps. Ich werde mal ein bisschen herumprobieren und schauen, ob ich das auf die Reihe bekomm.

Das mit den CSS-Sprites ist eine geniale Sache, danke für den Tipp.

Melde mich wie es ausgegangen ist.

LG Mike

 

[Mike_K]

AW: Probleme bei Hover Effekt mit Bildern

Es hat ein wenig länger gedauert aber nun habe ich heute endlich an der Navi weiterbauen können.

Ich habe dem a-Tag eine ID gegeben und dieser dann Höhe, Breite und BG-IMG zugewiesen. Als nächstes habe ich dann in einer neuen Anweisung der an die ID ":hover" angehängt und darin das BG-IMG getauscht. War das so gemeint?

LG Mike

 

[sokie]

AW: Probleme bei Hover Effekt mit Bildern

Du musst eben auch darauf achten, dass dein a-Element die Eigenschaft display:block; erhält (ansonsten funktioniert die zuweisung von height und width in vielen Browsern nicht)

 

[Mike_K]

AW: Probleme bei Hover Effekt mit Bildern

Danke! Hat funktioniert!