SW-Thumbnails bei Fokus farbig

[Kalle_B]

Hallöle,

in einer Tabelle habe nebeneinander schwarzweiße Thumbnails, die beim Überfahren mit der Maus farbig werden sollen. Und bei Klick dann auf die neue Seite verlinken.

Mit Javascript kein Problem, da wird einfach das SW-Bild ersetzt.

Geht das auch mit CSS? Und für alle Browser?

[steffenb]

hallo!

probiers mal so:

<!--style-->
a.swpic {
          display:block;
          width:(hier die breite des bildes);
          height:(hier die höhe des bildes);
          background:url(pfad zum sw bild) no-repeat;
        }

a.swpic:hover
        {
          background:url(pfad zum bunten bild) no-repeat;
        }
<!--style-ende-->

<!--html-->

<a href="ziel" class="swpic"></a>

<!--html-ende-->

bin mir aber nicht sicher. die anderen dürfen mich schlagen, wenn ich falsch liegen sollte :)

mfg,
steffenb

[Kalle_B]

hallo, steffenb,

Klasse, dein Vorschlag funktioniert.

Die Arbeit mit Hintergrundbildern hat aber leider den Nachteil, dass sie nicht skalierbar sind, damit auch nicht barriere-arm.

Und beim Firefox 'hakt' es. Beim Hinein- und Hinausfahren in die Fläche bleibt der Mauszeiger eine knappe Sekunde stecken, um das Bild und den Mauszeiger zu wechseln.

Der IE 5 macht's fixer.

Es hakt beim FF auch, wenn ich den Bildwechsel mit Javascript mache:

<td><a href='index.htm'>
  <img src='img/welcome_sw.jpg' class=ic3 alt=welcome title=welcome
  onMouseOver="this.src='img/welcome.jpg'" onMouseOut="this.src='img/welcome_sw.jpg'">
  </a></td>

Vielen Dank.

Kalle

[hubschraubaer]

Hi!
Hakt es nur beim ersten mal? Sprich während des Ladens?
ciao, hubschraubaer

[Auge]

Hallo

Die Arbeit mit Hintergrundbildern hat aber leider den Nachteil, dass sie nicht skalierbar sind, damit auch nicht barriere-arm.

Würdest du "Vordergrund"bilder skalieren? Nicht, dass das nicht ginge, aber es sieht meist bescheiden aus, da der Browser die native Auflösung auf die geforderte umrechnen muss.

Und beim Firefox 'hakt' es. Beim Hinein- und Hinausfahren in die Fläche bleibt der Mauszeiger eine knappe Sekunde stecken, um das Bild und den Mauszeiger zu wechseln.

Das liegt vermutlich am Nachladen des zweiten Bildes. Es ließe sich umgehen, indem du beide Bilder zu einem vereinst, und bei :hover nur die Position des Bildes veränderst, anstatt ein neues Bild zu laden. Damit dauert allerdings das laden des Bildes etwas länger, da es größer ist.

|---------|
|         |
| sw-Bild |

Farbbild
---------

a:hover { background-position:...; }

Es hakt beim FF auch, wenn ich den Bildwechsel mit Javascript mache:

<td><a href='index.htm'>
  <img src='img/welcome_sw.jpg' class=ic3 alt=welcome title=welcome
  onMouseOver="this.src='img/welcome.jpg'" onMouseOut="this.src='img/welcome_sw.jpg'">
  </a></td>

Auch hier wird das zweite Bild vom Server nachgeladen. Allerdings kannst du die, bei denen JavaScript aktiviert ist, unterstützen, indem du die Bilder per JavaScript vorlädst. Das brächte nur dann nichts, wenn der Besucher schon vor dem Beenden des Vorladens das Bild "aktiviert", also den Link hovert.

Tschö, Auge

[Alyssis]

Und beim Firefox 'hakt' es. Beim Hinein- und Hinausfahren in die Fläche bleibt der Mauszeiger eine knappe Sekunde stecken, um das Bild und den Mauszeiger zu wechseln.

Ja. Weil er das Hintergrundbild das gewechselt wird läd. Lässt sich leider nicht vermeiden. Bei JavaScript könnte man die Bilder preloaden, weiß nicht ob das auch bei der CSS-Methode hilft.

[Auge]

Hallo

Und beim Firefox 'hakt' es. Beim Hinein- und Hinausfahren in die Fläche bleibt der Mauszeiger eine knappe Sekunde stecken, um das Bild und den Mauszeiger zu wechseln.

Ja. Weil er das Hintergrundbild das gewechselt wird läd. Lässt sich leider nicht vermeiden. Bei JavaScript könnte man die Bilder preloaden, weiß nicht ob das auch bei der CSS-Methode hilft.

Natürlich, das Bild wird ja nicht explizit für die Verwendung mit JavaScript geladen. Zumindest funktioniert es (optisch, wie gewünscht), wenn der Benutzer den Link erst dann hovert, wenn der Preload abgeschlossen ist.

Tschö, Auge

[Alyssis]

Hallöle,

Hallo,

in einer Tabelle habe nebeneinander schwarzweiße Thumbnails, die beim Überfahren mit der Maus farbig werden sollen. Und bei Klick dann auf die neue Seite verlinken.

Mit Javascript kein Problem, da wird einfach das SW-Bild ersetzt.

Geht das auch mit CSS? Und für alle Browser?

Ja. Solange es ein Link ist (der IE anzeptiert es sonst nicht). Aber bei Dir sollen ja ja sowieso Links sein, von daher kein Prolem.

Dazu gibst Du dem Link im Normalzustand das SW-Bild als Hintergrund und beim "MouseOver" (Pseudoklasse :hover) das farbige.

Hintergrundbilder:
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

Pseudoklassen für Verweise:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active