✔ Bilder auf Hintergrundbild anpassen?

[GFX-Händchen]

Hi all,

erstmal hoffe ich, dass ich in der richtigen Kategorie die Frage stelle.

Ist es möglich, wenn man ein Hintergrundbild wie im Anhang hat, dass man die weißen Blüten irgendwie per html/css an die exakten/entsprechenden Stellen gesetzt bekommt?

Habe mal die Blüten und wo sie hingehören mal mit rot markiert.:suspekt:
Nicht wundern, die Blüten sind im Moment nur in einem Grafikprogramm auf den Hintergrund gelegt worden, also noch nichts in html/css gemacht.

Die Blüten habe ich aber als gif-Datei schon "ausgeschnitten".

Möchte diese Blüten nämlich als Links benutzen.

 

[Maik]

Hi,

mit der CSS-Positionierung sollte es kein Problem darstellen, die Grafik-Links wie gewünscht im Anzeigebereich anzuordnen.

Die Alternative zu dem Hintergrundbild und den Grafik-Links wäre eine verweis-sensitive Grafik (ImageMap).

 

[GFX-Händchen]

Danke, das schaue ich mir noch genauer an.

Die eine Blüte habe ich damit schon an die richtige Position bekommen.

 

[GFX-Händchen]

Ähm wie bekome ich es hin, dass wenn man mit dem Mauszeiger über die Blüte fährt (a:hover) die Grafik z.B. rot angezeigt wird?
Habe dazu auch einmal die Blüte in rot und als gif gespeichert und ihr folgendes in csss zugewiesen:

a:hover {background-image: url(../bluete1-1rot.gif); top:153px; left:238px;}

Die Position top und left mit den Werten stimmt für die weiße Blüte!
Es wird mir aber beim Mouseover keine rote Blüte angezeigt.

*wälzt Bücher*

 

[Maik]

Nach der background-image-Eigenschaft fehlt das Semikolon.

 

[GFX-Händchen]

Hab ich grad auch gemerkt und den Beitrag editiert.

Allerdings half das jetzt auch nicht weiter.

Edit:

a:hover img {background-image: url(../bluete1-1rot.gif); background-position: relative; top: 153px; left:238px;}

Brachte jetzt zwar die rote Blüte, allerdings hinter der weißen.
Also wenn man mit der Maus über die weiße Blüte geht sieht man, dass unten drunter die rote Blüte ist.
Ich wollte aber ja, dass die rote obendrauf ist bzw. sich die Farbe nur ändert.:suspekt:

 

[Maik]

Verleih den Links mit display:block "Block-Level-Charakteristika" und definiere für sie entsprechend der Grafikdimension eine Breite und Höhe.

//edit: Für die background-position-Eigenschaft gibt es den von dir gesetzten Wert relative nicht.

Zeig doch bitte mal den vollständigen HTML- und CSS-Code, oder nenn den Link zur Testseite, damit dort einen Blick drauf werfen kann.

 

[GFX-Händchen]

Hab ich das richtig verstanden?

a {display: block; width:100%; height: 100%}

Background-position hab ich rausgelöscht.

 

[GFX-Händchen]

Ich bekomms nicht gebacken , wäre über Hilfe dankbar.

 

[Maik]

Ich kann mich nur wiederholen:

Zeig doch bitte mal den vollständigen HTML- und CSS-Code, oder nenn den Link zur Testseite, damit dort einen Blick drauf werfen kann.

Denn aus deinen beiden unterschiedlichen Selektoren (a:hover vs. a:hover img) ist nicht ersichtlich, wie sich das Modell nun tatsächlich zusammensetzt.