Bildteile vergrößern

[mangani84]

Hallo und frohes NEUES JAHR erstmal zusammen.
Habe direkt zum Anfang 2009 ein kleines Anliegen und weiss auch nicht genau ob das Thema mit CSS zu lösen ist.

Habe ein Bild auf der Homepage, welches ich gerne in 4 unsichtbare Abschnitte teilen möchte. Wenn man dann auf einem der Abschnitte mit dem Cursor drüberfährt sollte dieser Abschnitt als großes Detailbild erscheinen. Ist das mit CSS machbar und wenn ja, wie würde das funktionieren?

Freue mich schon sehr auf eure Antworten.

Gruß
mangani94

 

[_Thor_]

Möglich ist es, dazu benutzt du

img:hover

Entweder du änderst beim hover die Größe des Bildes, oder du änderst das Hintergrundbild in einem Container, welcher dann das vergrößerte Bild anzeigt.

 

[mangani84]

Hi @ Thor, danke für die schnelle Antwort.
Hört sich ja nicht so kompliziert an, nur sind es ja eigentlich 4 Bilder die je nach Cursorlage vergrößert werden sollen. Ich weiss nicht, wie ich also aus einem Bild 4 verschiedene "hover" erzeugen kann?

 

[_Thor_]

Wenn du sie schon zerschnitten hast, gibst du jedem eine andere ID und sprichst die dann damit an.

img#id:hover {...}

Oder du gibst allen eine Klasse, dann sparst du dir die ID's

img.class:hover {...}

Der Vorteil an der Klasse ist, du brauchst nur eine, für die ID's bräuchtest du 4, da eine ID eindeutig sein muss.

Eine andere Möglichkeit, ohne das Bild zu zerteilen wäre diese hier SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

 

[threadi]

Möglich ist es, dazu benutzt du

img:hover

Das geht jedoch im Internet Explorer 6 und älter nicht. Ich würde statt dessen Links um die Grafiken verwenden.

a:hover img { .. }

 

[prm]

Vielleicht holft das weiter? Bildergalerie mit Vergößerungseffekt
Beachte die Spezialangaben für den IE.

 

[mangani84]

Danke für eure Hilfe. Habe es soweit mit CSS hinbekommen :)
Gruß
mangani84