Bild über Bild per CSS? Einstellungen

[Grummel]

Hallo Leute,
gibt es eigentlich eine Möglichkeit per CSS eine GIF-Grafik über ein vorhandenes Bild zu legen, was per Popup aufgerufen wird? Ich würde gerne meine Thumbnails vom Newssystem mit einem Plus kennzeichnen, um zu zeigen, dass man das Bild zum vergrößern anklicken kann. Hat da jemand eventuell eine Idee? Olaf vielleicht?

so solls aussehen: http://www.cinempire.de/preview.jpg
so siehts aus: http://www.cinempire.de

Der Beitrag wurde von Grummel bearbeitet: Tue. 4. July 2006, 19:23

[T3rrabug]

Hab mir das Newssystem noch nich angeguckt, aber kannst du das Bild nicht als bg eines div definieren und da dann das andere Bild reinpacken ? Abstände anpassen und es sieht aus wie im bsp.

[Grummel]

Das Problem ist, dass das Thumbnail über das Newssystem eingebunden ist, und ich nicht genau weiss, wie ich das mit CSS lösen soll, da ich keine Pfade zu Bildern habe, sondern nur "Platzhalter".

Die betreffende Stelle im Newssystem sieht so aus:

QUELLTEXT

<a href="java script:new_imagepopup('{url_large}','','Fenster schließen','','{width}','{height}','true');"><img src="{url}" style="float:left;" alt="{alt}" height="{thumbheight}" width="{thumbwidth}"></a>

Wie ich da jetzt das Thumbnail als Hintergrundbild über CSS einbinden soll, ist mir schleierhaft.

[T3rrabug]

QUELLTEXT

<div style="background-image: url({url}); width:{thumbwidth}; height:{thumbheight}; float:left;"> <img das hier is das Plus />  </div>

Komm grad nich drauf, wie man das ganze div als Link umsetzen könnte. Kann aber leider nicht nachschlagen, da ich so gut wie weg bin
Du schaffst das schon

[saschapi]

pack doch einfach zusätzlich in das <a> </a> noch dein +Bild rein.

Gib dem a position: relative; und dem +Bild position: absolute;
top: 10px; right: 10px;

Dann ist das Bild immer in der oberen rechten Ecke!

[Grummel]

Suppi, danke hat super geklappt.

Ergebnis sieht man unter unten stehender URL.

Zumindest unter Firefox funktionierts super, warums im IE nicht klappt, keine Ahnung.

Im Netscape 8.1 gehts auch nicht.

Liegt eventuell am noch leeren rechten Teil.

Der Beitrag wurde von Grummel bearbeitet: Wed. 5. July 2006, 16:55

[Daniel]

IE und position:relative? ich hatte da einige Probleme, weil ich den z-index nicht angegeben habe. Kannst ja mal probieren, ob's daran liegt. dem <a> ein z-index von 1 und dem + <img> ein z-index von 2 geben.


Just a wild guess...

[Grummel]

Hat leider auch nicht geklappt.

Eventuell muss ich 2 DIV-Boxen erstellen, die übereinander liegen.

[Bunny]

aber im FF stimmt die Positionierung aber noch nicht so richtig?

[Grummel]

Doch die stimmt, spiel nur im Hintergrund mit dem Code bissel rum, ums eventuell doch noch allein zu schaffen. Sieht aber schlecht aus. :-/

Schau nochmal, jetzt stimmts zumindest im Firefox.

[Bunny]

Jo, passt jetzt. Ich würds aber unten rechts platzieren.

Gruß
Bunny

[saschapi]

gib mal dem a einen display: block; was geht dann?

[Grummel]

Netscape 8.1 und Firefox passt jetzt, IE geht leider nicht. :/

[saschapi]

So wie ich das sehe hast du nicht dem A-Tag das display block und das position relative gegeben sondern dem <p> tag drumrum!

Hattest du versucht es direkt in <a> zu packen?

[Grummel]

Ja hatte ich, hat aber nicht funktioniert. Olaf hat mir die jetzige Version geschickt und die funktioniert in meinen installierten Browsern jetzt ganz gut.

Ich musste zwar nochmal bissel was umstricken, aber jetzt funktionierts.

Danke trotzdem für die zahlreichen Vorschläge.

[Olaf]

Nee, DAS hab ich dir nicht geschickt

Das da fliegt dir um die Ohren sobald sich die Bildgröße ändert!

[Grummel]

Ich baus gleich nochmal um. Bin nur grad etwas anderweitig beschäftigt.

[Grummel]

Habs umgebaut und sieht ganz ok aus.

Gibts eigentlich Seiten wo ich eventuell noch nen anderes Bild zum Kennzeichnen finden kann? Das Plus ist nicht so ganz mein Favorit.

Ich dank schonmal allen, die geholfen haben

[Olaf]

Jo geht doch

Wenn du jetzt noch:

QUELLTEXT

.block img.view{
position:absolute;
right:10px;
bottom:10px;
}

Dann sind alle zufrieden und es sollte auch bei anderer Bildgr. an der Stelle stehen.