Alternative Grafik als Link in der Navigation

[Altrocker]

Mahlzeit zusammen,

vorab, ich bin Laie und bitte um Nachsicht, falls meine Frage albern oder blöd sein sollte.

Ich habe auf meiner Seite eine Navigationsleiste, bei der Schriftzug-Grafiken als Link fungieren. Sieht folgendermaßen aus:

<li><a href="link1.php"><img src="bilder/layout/bild1.gif" width="115"></a>
</li>
<li><a href="link2.php"><img src="bilder/layout/bild2.gif" width="115"></a>
</li>

Die Schriftzug-Grafiken haben eine blaue Farbe. Nun würde ich gerne erreichen, dass sie bei hover die Farbe wechseln. Ich brauche also alternative Grafiken in einer anderen Farbe, die angezeigt werden, wenn der Mauszeiger drüber streicht. An dem Punkt weiß ich leider nicht mehr weiter. Keine Ahnung, wie und ob überhaupt sowas zu realisieren ist.

Wäre klasse, wenn mir jemand weiterhelfen könnte, vielen Dank dafür vorab! :)

 

[threadi]

Zunächst: eine Navigation aus Grafiken auszubauen hat mehrere riesen große Nachteile:

• Die Navigation wird durch Suchmaschinen nicht korrekt eingelesen. Sie können ja die Bildbeschriftungen nicht lesen. Das kann für die Indizierung und Auffindbarkeit deiner Seite von Nachteil sein.
• Die Wartung einer solchen Navigation bereitet enormen Aufwand. Wenn Du nur mal einen Text ändern willst, musst Du gleich eine Grafik erstellen.
• Falls Du eine responsive Seite bauen willst (was ich heutzutage empfehlen würde) könntest Du solche Grafiken nur in stark begrenztem Rahmen sinnvoll einsetzen. Mobilgeräte könnten das Menü ggfs. nicht sauber darstellen, wenn die Grafiken zu groß sind.

Schau dir daher mal responsive Menüs an. Wenn Du eine besondere Schriftart für das Menü nutzen willst, kannst Du diese auch per font-face einbinden, siehe:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face
Per CSS hättest Du zudem auch weit mehr Gestaltungsmöglichkeiten und könntest die ganze Grafik durch wenige Zeilen Code ersetzen, die zudem auch o.g. Nachteile revidieren.

Solltest Du bei deinem Wunsch bleiben, sehe ich 2 Möglichkeiten:

1. Setze die Bilder nicht mehr img-Element ein sondern per CSS-Background-Image. Dieses kannst Du dann per CSS-Hover ersetzen.
2. Verwende JavaScript um die Bilddateien im img-Element bei Mausberührung auszutauschen. Siehe: http://www.web-toolbox.net/webtoolbox/java/links-aendern-2image/aendern-1image.htm

 

[SpiceLab]

Solltest Du bei deinem Wunsch bleiben, sehe ich 2 Möglichkeiten:

1. Setze die Bilder nicht mehr img-Element ein sondern per CSS-Background-Image. Dieses kannst Du dann per CSS-Hover ersetzen.
2. Verwende JavaScript um die Bilddateien im img-Element bei Mausberührung auszutauschen. Siehe: http://www.web-toolbox.net/webtoolbox/java/links-aendern-2image/aendern-1image.htm

Zur 1. Möglichkeit sei noch ein Pro Tipp d'rangehängt: CSS Sprites

Grundlagenforschung:

• https://de.wikipedia.org/wiki/CSS-Sprites
  
• https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Sprites
• http://webkrauts.de/artikel/2007/hovereffekte-mit-css-sprites

Sowie zur weiteren persönlichen Recherche:

• https://www.google.de/search?q=css+sprites
• https://www.google.de/search?q=css+sprites+generator
  
• https://www.google.de/search?q=css+sprites+responsive
• https://www.google.de/search?q=css+sprites+responsive+generator

 

[Altrocker]

Danke für die schnellen und hilfreichen Antworten! Hast mich überzeugt, werde von den Grafiken Abstand nehmen und mir die font-face-Kiste mal genauer angucken. Danke! :)