Hover-Effekt für Farbe von Hyperlink-Bildern im IE

[darkrulez]

Hi,
ich möchte die Farbe von Hyperlinks, wenn man mit der Maus darüber fährt, mit CSS ändern und habe dazu folgenden Code:

a:hover {
 text-decoration: none;
 color:#FFFFFF;
}

Für Textlinks funktioniert das in Firefox und IE.
Ich verlinke jedoch auf Bilder mit folgendem Code:
<a href="http://...."><img src="buttons/support.jpg" alt="support" width="183" height="23" /></a>

Bei diesen Bildern funktioniert dann der Hover Effekt nur noch in Firefox, nicht jedoch beim IE.
Weiterhin ignoniert der IE auch andere Link Eigenschaften für die verlinkten Bilder, wie z.B.:
a:link {
 text-decoration: none;
 color:#000000;
}

Wie muss ich das mittels CSS schreiben, damit der IE den Hover Effekt auch für die verlinkten Bilder ausführt?

Vielen Dank für eure Hilfe.

[suit]

Wie muss ich das mittels CSS schreiben, damit der IE den Hover Effekt auch für die verlinkten Bilder ausführt?

color bestimmt die textfarbe - welche textfarbe soll sich beim bild denn ändern?

[MudGuard]

Hi,

color bestimmt die textfarbe - welche textfarbe soll sich beim bild denn ändern?

Nicht die Text-Farbe, aber ggf. die border-color. (Default für die border-color ist der Wert der color-Eigenschaft)

cu,
Andreas

[darkrulez]

Sorry, hatte den Text gestern Abend wohl falsch gepostet:(

Danke für eure Antworten.
Die genannten Links scheinen in die richtige Richtung zu gehen, jedoch muss ich zugeben, dass ich als CSS Anfänger nun erstmal ein wenig verwirrt bin.
Ich habe mein Problem mal hier hochgeladen:
http://62.141.43.159/WebHosting/test/button-test.php
Öffnet man die Seite mit FF, so verändert sowohl der Textlink seine Farbe, wenn man mit der Maus darüber fährt, sowie sich auch der Rand des Bildes.
Im IE jedoch bleibt der Button (bzw. das Bild) immer gleich.

Wie gehe ich nun am besten vor, damit der Suchen-Button auch im IE einen weißen Rand bekommt, wenn man mit der Maus darüber fährt?
Der IE scheint meinen CSS Code für Hyperlinks bei Bildern komplett zu ignorieren? Der FF jedoch nicht.

Bisher wurde dieses Posting 0 mal als fachlich hilfreich bewertet. Um ein Posting zu bewerten, müssen Sie sich registrieren.

[ChrisB]

Hi,

Bisher wurde dieses Posting 0 mal als fachlich hilfreich bewertet. Um ein Posting zu bewerten, müssen Sie sich registrieren.

Wenn du schon dein vorheriges, gleichlautendes Posting meinst kopieren zu muessen, weil's dir nicht schnell genug geht und dir die Geduld fehlt - dann solltest du vielleicht wenigstens diese Zeile weglassen, damit's nicht ganz so arg auffaellt ...

MfG ChrisB

[Christoph Schnauß]

hallo,

Ich verlinke jedoch auf Bilder mit folgendem Code:
<a href="http://...."><img src="buttons/support.jpg" alt="support" width="183" height="23" /></a>
Bei diesen Bildern funktioniert dann der Hover Effekt nur noch in Firefox, nicht jedoch beim IE.

Ich wüßte nicht, warum ausgerechnet Firefox eine CSS-Eigenschaft auf images anwenden sollte, die ausdrücklich für Text vorgesehen ist. Und welchen IE benutzt du: IE5, IE6, IE7, IE8beta?

Weiterhin ignoniert der IE auch andere Link Eigenschaften für die verlinkten Bilder, wie z.B.:
a:link {
text-decoration: none;
color:#000000;
}

Da gibt es nichts zu "ignorieren", weil die gewünschte Farbe eben nur für Text gilt, nicht aber für deine Bilder.

Wenn du möchtest, daß deine Bilderchen während des Darüberfahrens mit der Maus die Farbe ändern, wird dir vermutlich kaum etwas anderes übrigbleiben, als die Bilder eben per CSS zu "tauschen". Wie das geht, hat Ingo sehr gut dargestellt.

Grüße aus Berlin

Christoph S.

[suit]

Wenn du möchtest, daß deine Bilderchen während des Darüberfahrens mit der Maus die Farbe ändern, wird dir vermutlich kaum etwas anderes übrigbleiben, als die Bilder eben per CSS zu "tauschen". Wie das geht, hat Ingo sehr gut dargestellt.

http://www.wellstyled.com/css-nopreload-rollovers.html

diese variante gefällt mir um einiges besser und ist flexibler - hat allerdings einen haken

1. mit gilder levin als image replacement technik flackert das gute stück im ie6 oder mit der phark methode ist bei css ein, bilder aus kein linktext zu sehen

dennoch ist die methode besser als die oben genannte da ein bild, welches nur zu designzwecken genutzt wird (und ein bunter menulink ist ein designelement) nicht mit <img /> eingebunden werden sollte

[Christoph Schnauß]

hallo,

http://www.wellstyled.com/css-nopreload-rollovers.html

Kannte ich bisher noch nicht.

diese variante gefällt mir um einiges besser und ist flexibler - hat allerdings einen haken

Gefallen darf sie dir gern, ob sie "flexibler" ist, ist vermutlich Ansichtssache, und "Haken" hat bisher jeder Lösungsvorschlag, auch der von Ingo. Aber es sind immerhin Vorschläge, wie man den "hover"-Effekt bei eingebundenen Grafiken nur mit CSS lösen könnte.

da ein bild, welches nur zu designzwecken genutzt wird (und ein bunter menulink ist ein designelement) nicht mit <img /> eingebunden werden sollte

Das wird der OP vermutlich nicht gleich verstehen ;-)

Grüße aus Berlin

Christoph S.

[ChrisB]

Hi,

Bei diesen Bildern funktioniert dann der Hover Effekt nur noch in Firefox, nicht jedoch beim IE.

Und "funktioniert nicht" heisst ...?

MfG ChrisB

[darkrulez]

Danke für eure Antworten.
Die genannten Links scheinen in die richtige Richtung zu gehen, jedoch muss ich zugeben, dass ich als CSS Anfänger nun erstmal ein wenig verwirrt bin.
Ich habe mein Problem mal hier hochgeladen:
http://62.141.43.159/WebHosting/test/button-test.php
Öffnet man die Seite mit FF, so verändert sowohl der Textlink seine Farbe, wenn man mit der Maus darüber fährt, sowie sich auch der Rand des Bildes.
Im IE jedoch bleibt der Button (bzw. das Bild) immer gleich.

Wie gehe ich nun am besten vor, damit der Suchen-Button auch im IE einen weißen Rand bekommt, wenn man mit der Maus darüber fährt?
Der IE scheint meinen CSS Code für Hyperlinks bei Bildern komplett zu ignorieren? Der FF jedoch nicht.

[suit]

Wie gehe ich nun am besten vor, damit der Suchen-Button auch im IE einen weißen Rand bekommt, wenn man mit der Maus darüber fährt?

der rand nennt sich "rahmen" dieser wird über die border-eigenschaft angesprochen

zb border: 20px solid green;

Der IE scheint meinen CSS Code für Hyperlinks bei Bildern komplett zu ignorieren? Der FF jedoch nicht

css ist zum ändern von bildern nur bedingt geeignet das einzig visuell änderbare ist der rahmen und die hintergrundfarbe (bzw das hintergrundbild) - natürlich ist das von das boxmodel ausgeschlossen ;)

wenn du dir den link ansiehst, den ich gepostet habe, wirdst du feststellen, dass du hier 2 bzw 3 grafiken tauschen kannst (bzw genauer genommen eine grafik verschieben kannst) um so einen mousover mit beliebigene wechseleffektn zu simulieren

auch der von Christoph Schnauß gepostete link ist hilfreich, hier ist es allerdings ebenfalls notwendig, dass du die grafik tauschst - einen rollover (ausser das ändern eine einzigen farbe im button) kannst du damit aber nur schlecht realisieren

[darkrulez]

Vielen Dank für die kompetente Hilfe von euch allen;)
Hab's nun mit der angesprochenen Border-Eigenschaft via CSS gelöst. Und zwar angewendet nicht auf a:hover, sondern auf img:hover. Funktioniert perfekt in FF und IE.
Liebe Grüße

[suit]

img:hover. Funktioniert perfekt in FF und IE.

img:hover funktioniert im internet explorer 6 - ist mir neu, lasse mich aber genere eines besseren belehren

[darkrulez]

img:hover. Funktioniert perfekt in FF und IE.

img:hover funktioniert im internet explorer 6 - ist mir neu, lasse mich aber genere eines besseren belehren

Du hast Recht. Habe es gerade getestet mit
FF 2.0 -> funktioniert
IE 7 -> funktioniert
IE 6 -> funktioniert nicht

Wobei es im IE 6 auch ohne Hover in Ordnung aussieht finde ich;)