Links hinter einem überlappenden DIV

[beetFreeQ]

Hi zusammen!

Ich hab da mal ein blödes kleines Problem, für das ich leider keine Lösung finde. Vielleicht weiß ja jemand von euch Rat, ob das machbar ist.

Die Sache ist folgende: Beim Redesign meines Blogs wollte ich gern Licht über den Inhalt "scheinen" lassen. Das soll so ablaufen, dass ich ein fix positioniertes DIV mit einem PNG mit halbtransparentem Lichtkegel als Hintergrund auf die Seite packe und der eigentliche Inhalt darunter liegt und unter dem Licht scrollbar ist. Zur besseren Vorstellung hier mal ein Mockup. Die Lampe und der Lichtkegel oben rechts soll halt fest an der selben Position stehen bleiben und der Inhalt darunter scrollen.

Das layouttechnisch aufzubauen, ist mit positionierten DIVs und z-index an sich auch kein Problem. Was ich nur nicht bedacht habe: Links, die unter diesen positionierten DIVs liegen, sind leider nicht anklickbar, weil sie ja hinter einem anderen Element liegen. Da ist es dem Browser dummer- aber verständlicherweise egal, ob das Element dahinter durchscheint oder nicht. Ebenso ist der Text dahinter natürlich auch nicht markierbar.

Bei einer Suche per Google bin ich leider nicht auf eine Lösung, sondern schon fast zur Erkenntnis gekommen, dass es wohl keine gibt. Aber ich dachte, als letzte Rettung weiß hier vielleicht jemand Rat! Ansonsten müsste ich meine Idee verwerfen, was ich ziemlich schade fänd...

Bin also für jeden Tipp dankbar!

[Tweetymax]

Hi zusammen!

Ich hab da mal ein blödes kleines Problem, für das ich leider keine Lösung finde. Vielleicht weiß ja jemand von euch Rat, ob das machbar ist.

Die Sache ist folgende: Beim Redesign meines Blogs wollte ich gern Licht über den Inhalt "scheinen" lassen. Das soll so ablaufen, dass ich ein fix positioniertes DIV mit einem PNG mit halbtransparentem Lichtkegel als Hintergrund auf die Seite packe und der eigentliche Inhalt darunter liegt und unter dem Licht scrollbar ist. Zur besseren Vorstellung hier mal ein Mockup. Die Lampe und der Lichtkegel oben rechts soll halt fest an der selben Position stehen bleiben und der Inhalt darunter scrollen.

Das layouttechnisch aufzubauen, ist mit positionierten DIVs und z-index an sich auch kein Problem. Was ich nur nicht bedacht habe: Links, die unter diesen positionierten DIVs liegen, sind leider nicht anklickbar, weil sie ja hinter einem anderen Element liegen. Da ist es dem Browser dummer- aber verständlicherweise egal, ob das Element dahinter durchscheint oder nicht. Ebenso ist der Text dahinter natürlich auch nicht markierbar.

Bei einer Suche per Google bin ich leider nicht auf eine Lösung, sondern schon fast zur Erkenntnis gekommen, dass es wohl keine gibt. Aber ich dachte, als letzte Rettung weiß hier vielleicht jemand Rat! Ansonsten müsste ich meine Idee verwerfen, was ich ziemlich schade fänd...

Bin also für jeden Tipp dankbar!

wie wärs mit unsichtbaren Divs, die vor der Lampe sind, und quasi als dummylinks anklickbar sind?

Nachteil ist natürlich, dass man für jeden verdammten link 2 elemente erstellen, und dann auch noch so positionieren muss, dass diese exakt übereinander liegen.

[beetFreeQ]

Naja, das würde leider nicht funktionieren, weil das ganze ein Blog ist, in dem in den Texten ja auch oft Links vorkommen, die ich nicht dynamisch an genau der selben Stelle mit einem Div oben drüber versehen kann. Ist mir im Endeffekt auch doch zu viel getrickst, wollte eigentlich ungern wild rumhacken...

Naja, ich hab schon die eine oder andere Idee, wie ich auf den Kopf und Fussbereich verzichten kann. Wird dann nur schade sein, dass der schicke Lichteffekt, der vor allem beim Scrollen über Bildern zu sehen ist, wegfallen muss...

Letztendlich wär's aber echt mal ne Idee für CSS 4 (in 3 ist sowas ja AFAIK noch nicht vorgesehen), einem Div eine Eigenschaft mitzugeben, dass es durchlässig ist... - das würde viele wirklich geniale Design-Ideen ermöglichen.

[azett]

Letztendlich wär's aber echt mal ne Idee für CSS 4 (in 3 ist sowas ja AFAIK noch nicht vorgesehen), einem Div eine Eigenschaft mitzugeben, dass es durchlässig ist... - das würde viele wirklich geniale Design-Ideen ermöglichen.

...und viele miese Tricks, weil der User u.U. überhaupt nicht sieht, was er tatsächlich anklickt. :hells:

[geloescht_JesterDay]

Letztendlich wär's aber echt mal ne Idee für CSS 4 (in 3 ist sowas ja AFAIK noch nicht vorgesehen), einem Div eine Eigenschaft mitzugeben, dass es durchlässig ist... - das würde viele wirklich geniale Design-Ideen ermöglichen.

Naja, eine von dir gerade

Und ein div ist ja durchlässig, also erstmal durchsichtig

Mehr wäre ja auch wieder absolut unlogisch. :hells:

Außerdem würde deine Idee eh bei 50% der Browser nicht funktionieren, da immer noch viele mit dem IE6 unterwegs sind. Der unterstützt kein position:fixed und transparente pngs schon gar nicht.

Mach es doch umgekehrt, den Text über deine Lampe. Ja, das ist nicht derselbe Effekt, aber immerhin sowas in der Art.

Und die Eigenschaft, dass sich die Textfarbe abhängig vom Hintergrund ändert (also Textfarbe irgendwie kombiniert (Addiert, Multipliziert etc) mit der Farbe darunter) wäre sogar etwas, was man durchaus einführen könnte, IMHO.

Ach ja, was findet man eigentlich rechts hinter einem div (Wenns links hinter einem Div schon nicht funktioniert)?

Bearbeitet 8. August 2008 von JesterDay

[azett]

Textfarbe abhängig vom Hintergrund

Wenn wir grad beim Brainstorming sind: Kann JavaScript sowas?

[Guybrush Threepwood]

Warum nicht? Du weißt den Style eines Elements einem anderen zu...

[azett]

Nicht einfach die Hintergrundfarbe nehmen - es ist ja ein Hintergrundbild Was ich meinte: Kann man per JS die Farbe eines Pixels des Hintergrundbilds auslesen - und zwar an der Position des gerade einzufärbenen Buchstabens?