Mouseover Effekt ohne Java

[Georg]

Gibt es eine Möglichkeit ein Gif-Bild zu ändern wenn der Mauszeiger über der Grafik steht? Also Mauszeiger geht über Grafik1 und ändert sich dann in Grafik2 (Rollover-Effekt).

Das ganze allerdings ohne JavaScript ...

[Bio]

Sup!

Mit a:hover ?

Gruesse,

Bio

[hilker]

Gibt es eine Möglichkeit ein Gif-Bild zu ändern wenn der Mauszeiger über der Grafik steht? Also Mauszeiger geht über Grafik1 und ändert sich dann in Grafik2 (Rollover-Effekt).

Das ganze allerdings ohne JavaScript ...

JA, sicher, das geht mit jeder beliebigen Programmiersprache, die Grafische Elemente verarbeiten kann.
Delphi, Java, C... usw.
Du mußt nicht JavaScript nehmen.

Aber mal spaß bei Seite... Du möchtest dass die Grafik sich beim drüberfahren ändert.
Dann schau Dich mal ein wenig in der CSS-Abteilung von SelfHTML um.
Es gibt die Möglichkiet mit Style Sheets bei Mouseover die Linkattribute zu verändern. Hier könntest Du ggf. einem Element deine Bilder als Hintergrund definieren, und bei .hover sollte es sich dann ändern.
Das ist aber in meinen augen eine doch recht gepfuschte Lösung, die aber funktionieren könnte... ausprobiert hab ichs allerdings selbst noch nicht.

mfG Markus

[Dennis]

Hi Georg,

Gibt es eine Möglichkeit ein Gif-Bild zu ändern wenn der Mauszeiger über der Grafik steht? Also Mauszeiger geht über Grafik1 und ändert sich dann in Grafik2 (Rollover-Effekt).

Das ganze allerdings ohne JavaScript ...

im Prinzip geht es mit CSS und :hover, aber dazu müsstest du das Bild als erstes mal per CSS einbinden (background) und dann austauschen. Würde ich allerdings nicht unbedingt empfehlen, der der IE das nicht interpretiert, wenn das ganze kein Link ist.

Möglich ist natürlich einen Link (A-Element) als Block Element zu definieren (display:block), die Grafik als Hintergrund einzubinden (background:url(../foo.gif);) und dann da noch eine :hover Klasse drauf zu packen mit einem anderen Hintergrundbild.

Wenn dann aber ein Browser kein CSS kann ... ;-)

Musst also wohl selber abwägen.

MfG, Dennis.

[MudGuard]

Hi,

im Prinzip geht es mit CSS und :hover, aber dazu müsstest du das Bild als erstes mal per CSS einbinden (background) und dann austauschen. Würde ich allerdings nicht unbedingt empfehlen, der der IE das nicht interpretiert, wenn das ganze kein Link ist.

Möglich ist natürlich einen Link (A-Element) als Block Element zu definieren (display:block), die Grafik als Hintergrund einzubinden (background:url(../foo.gif);) und dann da noch eine :hover Klasse drauf zu packen mit einem anderen Hintergrundbild.

Oder:
beide Bilder als img in den Link packen.
Bei :link und :visited wird das erste Bild auf display:inline und das zweite auf display:none gesetzt.
Bei :hover umgekehrt, das erste Bild auf display:none und das zweite auf display:inline.

Nachteil: Ohne CSS sind beide Bilder da.

cu,
Andreas

[Candid Dauth]

Hallo du da draußen,

Oder:
beide Bilder als img in den Link packen.
Bei :link und :visited wird das erste Bild auf display:inline und das zweite auf display:none gesetzt.
Bei :hover umgekehrt, das erste Bild auf display:none und das zweite auf display:inline.
Nachteil: Ohne CSS sind beide Bilder da.

Oder: Das normale Bild als img in den Link packen, das mit display:none verstecken, und dann den Hover mit dem background verwenden. Oder das Bild nur beim Hover ausblenden, und es durch das Hintergrundbild ersetzen.

Vorteil: Das Bild ist auch ohne CSS da.

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)