✔ CSS hover Bildwechsel!

[thefaxx]

Hallo,

auf meiner Seite befinden sich einige Links auf der rechten Seite. Auf der Linken Seite befindet sich ein Container 200x200 Pixel in dem ein Bild angezeigt wird. Wenn die Maus sich über einen der Links bewegt soll das Bild im Container ausgetauscht werden. Ist das nur mit CSS möglich oder komme ich da ohne JavaScript nicht weiter?

 

[HuRaHoRRe]

Ich denke da wirst du ohne Javascript nicht weiter kommen, da sich das Bild ja wohl in einem anderen Element befindet und nichts mehr mit dem link zu tun hat...

Ich lasse mich aber gerne vom Gegenteil überzeugen^^

 

[Cherrywine]

Hej,

mit CSS kannst du das bewerkstelligen, indem du mit Hintergrundgrafiken und der Pseudoklasse :hover arbeitest:

a { background: url(bild1.jpg); }
a:hover { background: url(bild2.jpg); }

Lieben Gruß
Cherrywine


€dit: erm, hatte das jetzt so verstanden, dass sich der Link in diesem Container befindet - wenn dem nicht so ist, nehme ich alles zurück

 

[HuRaHoRRe]

Ja das ist klar^^

Aber so wie ich das verstehe, will er eine Box auf der anderen Seite der Page in der irgendwelche Logos oder ähnliches angezeigt werden die etwas mit dem Link zu tun haben.
Er will nicht den Hintergrund der Links ändern...

 

[thefaxx]

Richtig! Die Box in der das Bild angezeigt wird bleibt immer an der gleichen Stelle, die Links sind in einer Tabelle auf der rechten Seite.

-----------
| Bild |
| Bild |
----------

Link 1
Link 2
Link 3
usw.

So in der Art. Lässt sich mit CSS anscheinend nicht lösen.

Danke für die Antworten

 

[crazymischl]

Hi thefaxx,
Das folgende wäre auch eine Lösung mit reinem css: (einfach die verschiedenen beispiele durchprobieren):

wenn du sowas meinst: guckst du hier xD

Hab ich übrigens beim ERSTEN ergebnis über gefunden: HIER


google benutzen xD

 

[thefaxx]

Das Infobox Beispiel ist mir bekannt, allerdings hilft mir das für meine Seite nicht weiter, denn auch hier kann ich über einen Link keine Bild-URL an den Div-Container übergeben. Mit der Variante könnte ich höchstens neben dem Link ein Bild aufpoppen lassen.

 

[Maik]

Hi,

wenn du die Bilder nicht in den Links einbetten möchtest, um sie mit CSS zu tauschen, wie z.B. hier: http://www.cssplay.co.uk/menu/gallery_click (was anstelle des Klicks auch beim Hovern funktioniert), kommst du nicht um den Einsatz von Javascript herum, weshalb ich das Thema dann erstmal ins entsprechende Board verschiebe.

 

[crazymischl]

Das ist doch das gleiche oder ?

ich habs bis jetzt so verstanden:

|-----------|            Link1
|   Bild   |            Link2
|  in div  |            Link1
|-----------|            Link1

nun soll wenn ich über Link 1 gehe, links ein Bild erscheinen.
Also mach doch einfach so: als startbild stellst du in den Div ein Bild rein, und per css lässt du dann bei hover über diesem Bild (per koordinaten) ein anderes aufploppen.
Edit: ok, "bildtausch" lässt mit reinem css nicht machen, ich hatte halt das Bild "überlagert" durch ein aufploppenden Bild...

 

[Maik]

@crazymischl: Dies funktioniert mit CSS aber nur dann, wenn das Grafikelement sich innerhalb des Links befindet, so wie es dein und mein empfohlenes Beispiel demonstriert.

Da der Autor aber nach eigener Aussage mit einer Tabelle arbeitet, in der sich die Links und Bilder in unterschiedlichen Zellen befinden, lässt sich der Bildertausch mit "reinem" CSS nicht umsetzen.