2JavaScript kombinieren

Doch, man kann 2 Javascripts nebeneinander laufen lassen aber mitunter gibt es dabei Komplikationen.

In diesem Fall ist das Problem, dass die Sterne jeweils in einem ziemlich großen Div untergebracht sind. Dieses verdeckt die Türchen, so dass die Mausklicks nicht zu denen durch kommen.

Lösung, indem Du mit diesem CSS die Divs für Mausaktionen durchlässig machst:

div[id^="dot"] {
    pointer-events: none;
}

Wenn der Hintergrund nicht mehr angezeigt wird, vermute ich, dass Du einen Syntaxfehler im CSS hast, so dass die betr. Regel nicht wirksam ist. Post doch mal das vollständige CSS oder lass es hier validieren:

http://jigsaw.w3.org/css-validator/validator

Dass das Div so groß ist, liegt daran, dass das Bild darin so groß ist: 500px x 500px und darin der kleine Stern. Hast Du dieses Bild selber gemacht?

Bevor wir da weiter machen, solltest Du aber die Frames heraus nehmen, die sind vollkommen veraltet und erschweren das Debuggen.

Warum führst Du denn die CSS- und JS-Dateien als .php? Werden die tatsächlich mit PHP generiert?

Ah, verstehe. Mein Browser beschwert sich, dass die CSS-Datei den falschen MIME-Typ hat.

Am besten wäre es, wenn Du die Seite mit dem CSS mit dem pointer-events: none; mal online stellst, damit man untersuchen kann, woran es liegt.

Ich nehme an, Du meinst diese Seite:

https://vorweihnachtszeit.ch/demo/advent.php?zugang=demo

Dort ist alles in Ordnung, beide Hintergründe sind sichtbar, der äußere weiße und der innere braune mit den Türchen.

Allerdings: Das pointer-event: none; finde ich beim Body und nicht bei den Divs.

Es ist schon richtig, dass Du es in die CSS-Datei setzt, aber Du musst es mit dem Selektor für die Divs tun, so wie ich es in Posting #2 gepostet hatte:

div[id^="dot"] {
    pointer-events: none;
}

Du hast auch ein Tippfehler gemacht

ddiv[id^="dot"]{pointer-events: none;}

Wieso verkleinerst du nicht einfach die Bilder so dass sie nur noch so groß sind wie die Sterne?

Deine türchen sind nicht anklickbar weil du die Css nutzt

table{
border-spacing: 0;
border-collapse: collapse;
empty-cells: hide;
pointer-events: none;// deswegen
}

EDIT ; sehe gerade das du auf fast alle Elemente das pointer-events:none; benutzt.( tr,td,table,h1,h2)

Hast du mal gelesen wofür das ist ?

jetzt mußt du nur noch den Fehler beheben den ich dir in Post 14# geschrieben habe.

das heißt div und nicht ddiv

Zitat von basti1012

jetzt mußt du nur noch den Fehler beheben den ich dir in Post 14# geschrieben habe.

das heißt div und nicht ddiv

also so muß es aussehen

div[id^="dot"]{
    pointer-events: none;
}

Ein bißchen nachdenken und man würde da selber drauf kommen