Deinen Code habe ich nicht analysiert, aber generell ist es so, dass CSS-Eigenschaften, die Du mit Javascript setzt, eine höhere Priorität haben als solche, die Du in einer CSS-Datei setzt. Vermutlich ist das die Erklärung für dein Problem.
Mit Angular habe ich mich bisher auch nicht beschäftigt. Wo verbirgt sich denn da das HTML für die Struktur aus deinem Eingangsposting, mit Title, Subtitle, den beiden Tabellen etc.?
Um das zu untersuchen, müsste man den Code sehen, am besten live über einen Link.
binde diese in meinen HTML Code ein und kann dann mit einem AJAX Script alle Datensätze einlesen.
In den HTML-Code brauchst Du sie nicht einzubinden, sondern in einer getrennte Datei ablegen. Wenn Du dich auch über Ajax informierst, wirst Du sehen, dass Du damit eine Datei auf dem Server, u. a. auch im JSON-Format, einlesen kannst.
Ist es dann noch möglich den mit AJAX importieren Datensatz zu formatieren?
Nein, das leistet Ajax nicht. Du bekommst eine JS-Struktur mit Arrays bzw. Objekten und musst diese in ein Struktur im DOM umwandeln. Das Formatieren geschieht dann mit CSS.
ist es mit AJAX auch möglich mir nur einen Datensatz anzeigen zu lassen und mit einem "next" u. "previous" Button zwischen allen vorhandenen Datensätzen durchzuklicken?
Leider nein, auch dieses geht über das hinaus, was Du mit Ajax machen kannst. Solch eine Funktion musst Du mit Javascript realisieren.
Macht es an der Stelle überhaupt sinn so etwas in eine Tabelle zu packen?
Die Frage ist berechtigt und es gibt gute Gründe, sie mit nein zu beantworten, denn eigentlich sind nur die beiden Strukturen mit M1, M2, ... sowie O1, O2, ... im semantischen Sinn jede für sich eine Tabelle.
Mein Gedanke war es die Daten bequem in einer Datei zu hinterlegen und die Tabelle greift dann darauf zu und stellt diese grafisch dar.
Das ist sicher eine gute Idee, vor allem wenn sich die Daten häufig ändern. Dann brauchst Du nicht jedes Mal das ganze HTML umzuschreiben, sondern nur diese Datei zu ändern. Für das Format sehe ich zwei Möglichkeien:
Die Datei kannst Du dann mit Ajax einlesen.
Du bist hier mit den Segnungen des undurchsichtigen float konfrontiert worden. Ich empfehle, ebenso wie Du es bei der Nav schon getan hast, das fortschrittliche Flexlayout zu verwenden. Mit justify-content:space-between kannst Du die beiden Element so anordnen wie Du es möchtest.
Dies wollte ich, einschl. Hinweis auf die HTML-Fehler, schon vor zwei Stunden posten, aber vergaß, auf "Absenden" zu drücken 
Schau mal, ob sheetjs etwas für dich ist:
Googlesuche nach "tooltip on click" führt z. B. zu dieser Anleitung:
https://www.w3schools.com/howto/howto_js_popup.asp
Versuche, dieses auf deinen Anwendungsfall mit dem maussensitiven Bereich umzuändern.
Ein Problem sehe ich jedoch bei deinem Vorhaben: Du hast schon ein href-Attribut in dem area-Tag, das beim Klick auf eine neue Seite führt. Das widerspricht deiner Absicht, beim Klick den kleinen Kasten zu öffnen. Es geht ja nur eines von beiden.
Der Validator hat natürlich Recht, valide ist es nicht. Eine Lösung kann sein, das a-Element mit CSS als Button zu gestalten.
form: OMG, braucht man auf keinen Fall
a-Tag: unbedingt, ohne geht es nicht, wenn es ohne Javascript sein soll.
<a href="http://deinlinkziel.de"><button>Klick!</button></a>Body muss man eine ID zuweisen, in meinem Fall war das body1.
Geht auch ohne: document.querySelector("body")
Dieses scheint zumindest für Text zu funktionieren:
https://stackoverflow.com/questions/4855…with-all-styles
Mit meinem Posting #11 wollte ich vor allem auf den Ansatz mit der Simulation von Strg+a Strg+c hinaus, was laut dem Zitat bei Stackoverflow keinen Erfolg verspricht.
wie man strag + a zusammen klicken kann mit click() oder anders
Das wird hier besprochen:
https://stackoverflow.com/questions/3242…ext-input-field
There is a plug-in for this though called jquery-simulate to handle this. That being said the
tabkey changing focus is actually a default action in the web browser. Firing a browsers native event does not mean it will do it's default action, as the documentation for KeyboardEvents mentions:Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.
Einen Fehler erkenne ich auf Anhieb: Du legst in der while-Schleife über die Ergebnisse aus der Datenbank jedes Mal einen vollständige Tabelle mit <table> und </table> an. Verschiebe das echo für <table> vor die Schleife und das für </table> dahinter. Wenn es dann nicht besser ist, dann stelle die Seite mit PHP online und poste die URL.
doctype fehlt.
Den Hintergrund der Seite solltest Du auch als background-image mit CSS anlegen, dann funktioniert auch background-size:cover
body {
background-image: url(img/1Background.png);
background-size: cover;
}Dann erübrigt sich auch das negative margin.
Die style-Tags hast Du ziemlich unkonventionell angeordnet, besser alles in den head-Bereich legen.
Ein Großteil der Formatierung deiner Tabelle ist nicht sichtbar, weil Du keinen Kopf definiert hast und nur eine Zeile. Wenn ich einen Kopf und weitere Zeilen einfüge, ist auch die Formatierung sichtbar.
Was soll denn das Einfliegen auslösen? Wenn es automatisch gleich beim Laden der Seite erfolgen soll, ist es mit animation einfacher.
Verstehe. Pannellum ist auch eine Möglichkeit, wusste gar nicht, dass es auch Videos unterstützt. Ich hatte dieses nicht erwähnt, weil die Handhabung komplizierter als bei Mazipano ist.
Warum muss es immer Google sein? Es gibt auch andere gute Betrachter für Panoramafotos, z. B. Marzipano.
Das hat mich überrascht, denn normaler Weise ist Javascript tolerant bzgl. der Typen aber bei deinen cases funktioniert es nur, wenn die Werte als Strings angegeben werden, z. B. so:
switch (b) {
case "1":
if (a / 2 < 100) {
stakes = 2;
}
else {
stakes = 1;
}
break;
case "2":usw. Der Grund ist, dass die Werte (values) von input-Elementen Strings sind.
BTW1: Du kannst die Ermittlung der Werte der Radio-Gruppen sehr stark vereinfachen und auf die Schleifen verzichten, wenn Du document.querySelector verwendest:
b = document.querySelector("[name='g']:checked").value;
c = document.querySelector("[name='e']:checked").value;BTW2: Du gibst mehreren Radiobuttons jeweils die selbe ID. IDs müssen jedoch in einem HTML-Document eindeutig sein.
Hast Du denn Zugriff auf den Code der anzuzeigenden Webseite? Dann könntest Du eine Seite mit dem Graph anlegen und zwischen beiden Seiten durch eine Weiterleitung umschalten.