Hallo Leute, ich möchte gerne ein Bild beim überfahren mit der Maus
austauschen, sobald die Maus das Bild verlässt soll wieder das
Originalbild erscheinen.
Oder mittels Klick austauschen - oder wie hier -->
http://www.fdrtools.com/front_d.php so dass man zwei Zustände direkt
vergleichen kann.
Hat jemand eine Ahnung, wie ich das angehen soll?

Gerhard
_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german

Guten Morgen Gerhard,

du kannst das über das Pseudoelement :hover machen. Hierbei ist allerdings
zu beachten, dass dieser Effekt im IE6 nicht funktioniert. Ob es hierfür
einen Hack o.ä. gibt weiss ich jetzt nicht.

Grundsätzlich empfielt es sich so zu machen:

div.deineKlasse {
background: url(bild.jpg) no-repeat 0 0;
width: 200px;
height: 150px;
...
}
div.deineKlasse:hover {
background: url(bild.jpg) no-repeat 200px 0;
}

Der Trick dabei ist, dass dein Bild (bild.jpg) aus zwei Bildern besteht
die übereinander sitzen. Bei Mouseover wird das Hintergrundbild 200px nach
oben oder unten verschoben und dass zweite Bild rückt in den sichtbaren
Bereich der Box. Die Bilder befinden sich in einer Datei, da du dann das
zweite Bild nicht mehr extra nachladen musst und das Bild somit sofort
erscheint wenn du drüber fährst.

Obiger Code ist nicht getestet!

MfG
Henrik

Am 05.10.2008, 08:02 Uhr, schrieb Gerhard Obermayr <design (AT) cgc (DOT) at>:

> Hallo Leute, ich möchte gerne ein Bild beim überfahren mit der Maus
> austauschen, sobald die Maus das Bild verlässt soll wieder das
> Originalbild erscheinen.
> Oder mittels Klick austauschen - oder wie hier -->
> http://www.fdrtools.com/front_d.php so dass man zwei Zustände direkt
> vergleichen kann.
> Hat jemand eine Ahnung, wie ich das angehen soll?
>
> Gerhard
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german (AT) lists (DOT) netfielders.de
> http://lists.netfielders.de/cgi-bin/...o/typo3-german



--
Erstellt mit Operas revolutionärem E-Mail-Modul: http://www.opera.com/mail/
_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german

Gerhard Obermayr schrieb:
> Hallo Leute, ich möchte gerne ein Bild beim überfahren mit der Maus
> austauschen, sobald die Maus das Bild verlässt soll wieder das
> Originalbild erscheinen.
> Oder mittels Klick austauschen - oder wie hier -->
> http://www.fdrtools.com/front_d.php so dass man zwei Zustände direkt
> vergleichen kann.
> Hat jemand eine Ahnung, wie ich das angehen soll?
>
> Gerhard

also ich mache es immer mit dem CSS Pseudoelementen :hover und :active,
denn damit kannst du einfach einen einen weiteren Zustand definieren,
wenn die Maus über einem Element ist, bzw. wenn man darauf klickt...
in der Praxis setze ich immer die beiden Zustände auf das Gleiche.
Ob das mit IE6 funktioniert, musst du testen

Alternative 1:
JavaScript, damit kannst du einfach ein Element austauschen

Alternative 2:
TypoScript, damit klappt es auf jeden Fall in allen gängigen Browsern
ich würde das mit HMENU machen, und einfach nur eine Ebene definieren.
Ich meine TMENU unterstützt keine ROs

des weiten findest du mehr zu diesem Thema hier:
http://de.selfhtml.org/navigation/fa...en_highlighten
http://de.selfhtml.org/navigation/fa...gationsleisten

mit freundlichen Grüßen,
Phil
_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german

Gerhard Obermayr schrieb am Sun, 05 Oct 2008 08:02:27 +0200:

> Hallo Leute, ich möchte gerne ein Bild beim überfahren mit der Maus
> austauschen, sobald die Maus das Bild verlässt soll wieder das
> Originalbild erscheinen.
> Oder mittels Klick austauschen - oder wie hier -->
> http://www.fdrtools.com/front_d.php so dass man zwei Zustände direkt
> vergleichen kann.
> Hat jemand eine Ahnung, wie ich das angehen soll?
>
> Gerhard

prinzipiell gibt es zwei ansätze:

CSS:
die Bilder als Hintergrundbilder einbinden, wobei das eine nur bei
MouseOver sichtbar ist.
Da der IE6 kein :hover bei anderen Tags als <a> erkennt, musst du ggfls
einen pseudo Link basteln
<a href="#" class="bildtausch">&nbsp;</a>
dazu das CSS:
a.bildtausch { background-image:url(bild1.png); width:123px;
height:321px; display:block;}
a:hover.bildtausch { background-image:url(bild2.png); }


javascript:
wird überall funktionieren wo javascript aktiv ist. Ohne Javascript ist
das Bild halt statisch.
<div class="bildtausch" onMouseOver="switch('bild2.png')"
onMouseOut="switch('bild1.png')"><img src="bild1.png" alt=".."
title=".." /></div>
und natürlich vorher die function switch() definieren:

function switch(pic) {
this.innerHTML='<img src="'+pic+'" alt=".." title=".." />';
}

alle Beispiele sind nur als Anregung zu verstehen und stellen keinen
funktionierernden syntaktisch korrekten Code dar!!!
Tippfehler inklusive.

bernd
--
http://www.pi-phi.de/t3v4/cheatsheet.html
_______________________________________________
TYPO3-german mailing list
TYPO3-german (AT) lists (DOT) netfielders.de
http://lists.netfielders.de/cgi-bin/...o/typo3-german