Externe Links mit Bildern

[isaabellk]

Hallo,

ich habe ein kleines Problem.
Ich mache gerade eine Webseite für meinen Vater und ich habe schon interne Links mit Wörtern.
Dort verwende ich a:hover, active, etc.
Jetzt habe ich allerdings noch drei Logos als Bilder, die ich extern verlinkt habe.
Ich möchte gerne, wenn man über die Bilder geht, dass sich die Farbe ändern (also das Bild).

Wie mache ich das am besten?

 

[Space Vampire]

Wenn das Bild die Farbe ändern soll, wirst du wohl ein zweites Bild mit den gewünschten Farbe erstellen müssen. Wie die Psoido-Klasse :hover funktioniert weißt du ja schon.

 

[isaabellk]

Das habe ich schon alles gemacht.
Ich hab versucht, dass mit :hover zu machen, allerdings werden dann meine interne Verweise gelöscht, die auch mit :hover, :active gemacht sind.

 

[scbawik]

<style>
a img.hover {
     display:none;
}
a:hover img {
    display:none;
}
a:hover img.hover {
    display:block;
}
</style>
<a href="#">
    <img src="normal.jpg">
    <img class="hover" src="hover.jpg">
</a>

 

[AzRaIL]

Am besten ist es du erstellst ein Bild das beide Bilder (normal und mit veränderter Farbe) beeinhaltet, weist es deinem Link als background-image zu und änderst lediglich die background-position beim hovern.

http://de.wikipedia.org/wiki/CSS-Sprites

http://jsfiddle.net/xM5pg/

Breite und Höhe je nach größe des Bildes anpassen.

 

[Space Vampire]

Das habe ich schon alles gemacht.
Ich hab versucht, dass mit :hover zu machen, allerdings werden dann meine interne Verweise gelöscht, die auch mit :hover, :active gemacht sind.

Du musst diesen gelinkten Bidern eigene Klassen zuweisen!
a, a:hover, a:active, etc. betrifft global alle Links, die keine eigene Class zugewiesen bekommen haben.

Beispiel:

    a.bannerlink{
        display:block;
        height:60px;
        width:468px;
        background-image:url("banner1.jpg");
    }
    a.bannerlink:hover{
        background-image:url("banner2.jpg");
    }
    <a href=#" class="bannerlink" alt="foo_bar"></a>

Oder du machst es, wie AzRaIL vorgeschlagen hat. Mit einer durchgehenden Grafik. Das hat den Vorteil, dass das komplette Bild gleich bei Seitenaufruf geladen wird und Bild 2 nicht erst beim Hovern nachgeladen werden muss.
In diesem Fall ginge das so:

    a.bannerlink{
        display:block;
        height:60px;
        width:468px;
        background-image:url("banner.jpg");
        background-position:top left;
    }
    a.bannerlink:hover{
        background-position:top right;
    }

 

[scbawik]

Du musst diesen gelinkten Bidern eigene Klassen zuweisen!
a, a:hover, a:active, etc. betrifft global alle Links, die keine eigene Class zugewiesen bekommen haben.

Beispiel:

    a.bannerlink{
        display:block;
        height:60px;
        width:468px;
        background-image:url("banner1.jpg");
    }
    a.bannerlink:hover{
        background-image:url("banner2.jpg");
    }
    <a href=#" class="bannerlink" alt="foo_bar"></a>

Oder du machst es, wie AzRaIL vorgeschlagen hat. Mit einer durchgehenden Grafik. Das hat den Vorteil, dass das komplette Bild gleich bei Seitenaufruf geladen wird und Bild 2 nicht erst beim Hovern nachgeladen werden muss.
In diesem Fall ginge das so:

    a.bannerlink{
        display:block;
        height:60px;
        width:468px;
        background-image:url("banner.jpg");
        background-position:top left;
    }
    a.bannerlink:hover{
        background-position:top right;
    }

Ich verstehe nicht was ihr nur mit euren Hintergrundbildern habt.
Was soll der Vorteil sein?
Die Bildgröße ist bei eurer Lösung fixiert. Wenn die also nicht bei jedem Bild gleich ist - viel spaß. Dann dürft ihr entweder ganz elegant inline-styles anwenden, oder unzählige CSS Klassen für jeden Fall anlegen.

Das mit den Hintergrundbildern mag ja ganz gut sein für Menüs, Checkboxen etc.
Für Inhalte sind Hintergrundbilder aber meiner Meinung nach nicht gedacht.