CSS Bildwechsel bei mouseover

Herbie70 · 28. November 2013

Hallo,

ich habe folgende Vorlage für einen Bildwechsel gefunden, allerdings werden mir durch "a" alle Links mit dem gleichen Bild hinterlegt, sollte in meinem Menü nicht der Fall sein, d. h. jeder Link hat einen eigenen Bildhintergrund

Die Beispielseite mit entsprechendem Quelltext:

<title>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button_on.gif); }
</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#"> </a></p>
</body>
</html>

Auf der Hauptseite wird auch noch auf verschiedene Rollovereffekte hingewiesen, allerdings komme ich nicht auf die Lösung für mein Problem, kenne mich auch nicht allzugut damit aus.

"Wenn verschiedene Rollovereffekte für verschiedene Buttons gewünscht sind, etwa in einer Menüleiste, dann kann man anstatt a:hover auch #button1:hover oder ähnliches schreiben, um zwischen den Buttons mit Hilfe des id-Attributs zu unterscheiden."

Picus · 28. November 2013

Dann gib jedem Element deiner Liste eine ID/Klasse und sprich sie damit an. Versteh das Problem nicht...

Kausalat · 28. November 2013

Du musst für jeden individuellen Link eine eigene ID festlegen, z. B. so:

Code:

<ul>
...
<li><a href="#" id="link-startseite"><span>Startseite</span></a></li>
<li><a href="#" id="link-kontakt"><span>Kontakt</span></a></li>
...
</ul>

Dann kannst du wie im zitierten Absatz für jeden Menüpunkt eine eigene Hintergrundgrafik festlegen (sinnvollerweise als CSS-Sprite).

P. S.: Leere Linkbezeichnungen (&nbsp

sind alles andere als barrierefrei. Besser ist, den auszublendenden Text mit Inline-Tags zu umschließen (siehe obigen Code) und mit CSS verschwinden zu lassen.

Eine Alternative zu Hintergrundgrafiken, die lediglich aus Text bestehen, wären Webfonts.

QXARE · 28. November 2013

Code:

...
<head>
  <style>
    #button1 {...}
    #button1:hover {...}

    #button2 {...}
    #button2:hover {...}
  </style>
</head>
<body>
  <a id="button1" href="#">Button 1</a>
  <a id="button2" href="#">Button 2</a>
</body>
...

Herbie70 · 28. November 2013

Erstmal Danke an alle! Wenn man sich auskennt, ist es natürlich nicht schwer.

Ich werde mal testen.

@QXARE: ich habe es mit deinem Code hinbekommen. Die Schrift "Button 1" in der id habe ich entfernt, diese wurde mir über meine Bilder geschrieben.
So lassen oder bessere Lösung?

Daaron · 28. November 2013

Kausalat schrieb:
P. S.: Leere Linkbezeichnungen (&nbsp sind alles andere als barrierefrei. Besser ist, den auszublendenden Text mit Inline-Tags zu umschließen (siehe obigen Code) und mit CSS verschwinden zu lassen.

Besser als zusätzliches und nutzloses HTML - Markup (also z.B. ein <span> um den Text) wäre, einfach mit einem sehr großen negativen "text-indent" zu arbeiten.

Mir ist übrigens gerade noch eine nette Variante des Image-Flips eingefallen, die ich morgen mal genauer testen werde:
Jedes Element bekommt 2 HTML5-Data-Attribute mit, in denen die Pfade zu Basis- und Flip-Image stehen... eigentlich müsste "background: url(attr(...)) ..." funktionieren...

Herbie70 schrieb:
@QXARE: ich habe es mit deinem Code hinbekommen. Die Schrift "Button 1" in der id habe ich entfernt, diese wurde mir über meine Bilder geschrieben.
So lassen oder bessere Lösung?

Genau das hat Kausalat angesprochen: Leere Links sind vollkommen wertlos. Jeder, der keine Bilder sehen kann und kein CSS interpretiert, kann deine Seite dadurch nicht navigieren.
Wenn du wissen willst, wie arg du mit der Idee ins Klo gegriffen hast, dann nimm einfach mal einen rein textbasierten Browser wie Lynx und versuch, deine Seite zu verwenden. Wenn du bequem an alle wichtigen Inhalte kommst... ok. Wenn nicht: Ab ans Reißbrett.

So. Und weil du jetzt fragen wirst, wer denn bitte keine Bilder sehen kann:
1.) SUCHMASCHINEN! Genau das, worüber wohl 99% deiner Besucher kommen werden.
2.) Das Internet ist nicht nur für die Sehenden. Auch Blinde verwenden das Internet, und zwar indem sie sich entweder die Seiten von Screenreadern vorlesen lassen oder sog. Braille-Terminals verwenden.

QXARE · 28. November 2013

Code:

a {
  display: inline-block;
  text-indent: -9999px;
}

Hiermit kannst du trotzdem einen Text im a-Tag belassen.

Herbie70 · 29. November 2013

@QXARE: Danke, morgen habe ich Zeit zum Testen

Die Button mit Links habe ich auf die Art und Weise hinbekommen. Meine Probleme mit dem Menü noch:
- zwei Buttons sollten neben einem Bild sein, sie ordnen sich jedoch unterhalb an, müssten also floaten, was mir aber nicht gelingt.
- beim ersten mouseover erscheint kurz ein weißer Hintergrund, ist auch reproduzierbar wenn man den Cache löscht.

@Daaron: Wenn die Seite fertig, werde ich mit Lynx testen, kann ja zur Kontrolle nicht schaden.

Kausalat · 1. Dezember 2013

Zum deinen Problemen:

1. Veröffentliche bitte einmal den entsprechenden HTML- und CSS-Quellcode, den das nicht gelungene Floaten betrifft.

2. Daher habe ich gleich zu Beginn die CSS-Sprite genannte Technik in den Raum geworfen, die für weniger Serveranfragen sorgt WBODs (white backgrounds of death) verhindert.

QXARE · 1. Dezember 2013

Herbie70 schrieb:
- beim ersten mouseover erscheint kurz ein weißer Hintergrund, ist auch reproduzierbar wenn man den Cache löscht.

Das liegt daran, dass das Hover-Bild noch nicht geladen wurde. Lösen könnte man dies, indem man beide Bilder (Standard und Hover) in ein gemeinsames Bild packt - siehe CSS Sprites - wie es mein Vorposter schon angedeutet hat.

Herbie70 · 2. Dezember 2013

Floaten habe ich jetzt hinbekommen, musste dies nur unter nav a entsprechend angeben.

CSS Sprites teste ich demnächst.

Suche

CSS Bildwechsel bei mouseover

Herbie70

Ensign

Picus

Lt. Commander

Kausalat

Gast

QXARE

Lt. Commander

Herbie70

Ensign

Daaron

Fleet Admiral

QXARE

Lt. Commander

Herbie70

Ensign

Kausalat

Gast

QXARE

Lt. Commander

Herbie70

Ensign

Ähnliche Themen