✔ Bildwechsel nur mit CSS

[purpur]

Hallo alle,

ich möchte auf http://www.grimm-foundation.com die Bilder in der Kopfleiste ohne Javascript bei MouseOver wechseln lassen.

Es gibt im Netz und auch hier im Forum genügend Beispiele, wie das mit CSS zu machen ist. Es wird jedoch immer mit Hilfe von Links realisiert. Dabei ändert sich die Cursorform bei MouseOver vom Pfeil zur Hand.

Das möchte ich aber nicht.

Kennt jemand eine Möglichkeit, die Grafiken bei Mouseover ohne Javascript und ohne die Verwendung von Links wechseln zu lassen?

Vorab vielen Dank für eure Hilfe & Gruß,
Purpur

 

[Maik]

Hi,

in den standardkonformen Browsern könntest du es ganz einfach mit einem Hintergrundbild umsetzen, das mit Hilfe der :hover-Pseudoklasse getauscht wird:

<td id="img_1"><span>Blindtext</span></td>

td#img_1 {
background:url(tec/pic/GerdGrimm_Bogner.png);
width:124px;
height:124px;
}
td#img_1:hover {
background:url(tec/pic/GerdGrimm_NY_Mafiosi.png);
}

td span {
display:none;
}

Da der IE6 (und älter) die :hover-Pseudoklasse aber nur für das a-Element unterstützt, müsstest du entweder auf JS zurückgreifen, um ihm unter die Arme zu greifen, oder du setzt es mit Links um - siehe hierzu mein CSS-Tutorial CSS-Rollover.

Was den "Link-typischen" Mauszeiger betrifft, lässt sich dieser mit der cursor-Eigenschaft wie gewünscht umdefinieren - also:

a:hover {
cursor:default;
}

mfg Maik

 

[purpur]

Hallo Mike,

das sieht sehr gut aus

Nur der Mauszeiger macht mir Kopfzerbrechen:
Gilt das Umstellen des Cursors von Hand auf Pfeil nur einmal, oder ist das dann für das ganze Dokument umgestellt?
Es soll ja nur für den Bannerbereich gelten grimm-foundation.com.
Wenn das stimmt, dann müsste ich für alle andern Links (Navi, Mail) den Cursor wieder explizit angeben. Ist das richtig?

Danke & Gruß,
Purpur

 

[Loomis]

#header a:hover {
cursor:default;
}

Müsste so funktionieren. (ohne Gewähr!)

 

[Maik]

Die Umstellung für den Mauszeiger wäre nur erforderlich, wenn du den Bildwechsel mit Links realisierst.

Um dann eine Fallunterscheidung vornehmen zu können, damit der Mauszeiger ausschliesslich für diese Links im Dokument gilt, zeichnest du die umschliessende Tabelle mit einem ID-Bezeichner aus:

<table id="gallery"> ... </table>

und wendest darauf folgende Regel an:

table#gallery a:hover { cursor:default; }

mfg Maik

 

[Maik]

#header a:hover {
cursor:default;
}

Müsste so funktionieren. (ohne Gewähr!)

Das funktioniert, nur findet dieser Selektor auch eine Übereinstimmung mit den Links im nachfolgenden Listenmenü, das ebenfalls im #header eingebunden ist.

mfg Maik

 

[Loomis]

Oh, das hatte ich nicht bedacht :-(

 

[purpur]

Hallo Maik,

habe deine Hinweise umgesetzt, es funktioniert alles sehr schön.
Grimm Foundation
Dafür meinen Dank.

Es bleibt mir nun aber ein seltsames Gefühl:
Ich dachte bisher, dass im HTML der Inhalt, im CSS dagegen Form und Funktion hinterlegt wird.
Nun habe ich plötzlich Inhalt im CSS - nämlich die Wechselgrafiken.
Die Codierung ist bestechend einfach. Sowohl im HTML als auch im CSS.
Irgendwie hätte ich aber ein besseres Gefühl, wenn die Grafiken selbst im HTML hinterlegt wären und lediglich das Wechseln im CSS.

Habe ich da etwas falsch verstanden?

Danke nochmal & Gruß,
Purpur

 

[Maik]

Naja, das seltsame Gefühl kannst du eigentlich beruhigt beiseite schieben, denn im HTML-Code haben wir ja in den Tabellenzellen anstelle der Grafikelemente nun einen Text eingebettet, wenngleich er nicht den tatsächlichen Inhalt repräsentiert, und daher im Stylesheet mit display:none ausgeblendet wird

Doch wie heisst es so schön?

Der Zweck heiligt die Mittel.

mfg Maik

 

[purpur]

Hallo Mike,

dann also schiebe ich beiseite und bin beruhigt ;-)

Nochmal meinen Dank,
Purpur