JS: Alternative für eval() zum Auslesen einer Variablen

[Felix Riesterer]

Lieber martinmiethke,

aktuell ist es kein Button, sondern ein Link, der über ein JS ein kleines Fenster öffnet (wie weiter oben beschrieben). Diese Lösung gefällt mir aber nicht mehr.

die ist auch nicht gut. Ein Link sollte zu einer anderen Seite führen. Egal ob mit oder ohne JavaScript.

Prinzipiell kann der Link aber so gestaltet sein, dass er wie ein Button aussieht. Mit JavaScript kann man dann einen Klick auf diesen Link abfangen, um die besprochene Einblendung anzuzeigen. Mit Rechtsklick und neues Tab/Fenster würde der Link dann seiner ursprünglichen Funktion noch immer gerecht. Auch die Inhalte hinter dem Link würden für Suchmaschinen erreichbar.

Ansonsten klappt da etwas auf mit Erklärbärtext und einem automatisch abspielenden audio-Element.

So in etwa stelle ich mir das vor :-)

Na, dann los!

Zur letzten Frage: nein, kein CMS, kein PHP. Der Code entstand in den ersten Jahren mit GoLive, später mit Nvu bzw. KompoZer.

Also gut. Dann machen wir das mit den Mitteln eines Texteditors.

Hier ist ein Vorschlag, wie man das machen könnte. Keine Verpflichtungen!

Verzeichnis "Website" hat diese Struktur:

|
+-- audio
|    |
|    +--singschwan.mp3
|    +--hoeckerschwan.mp3
|
+-- img
|    |
|    +--singschwan.png
|    +--hoeckerschwan.png
|
+-- pages
|    |
|    +--singschwan.html
|    +--hoeckerschwan.html
|
+-- data.json
+-- index.html
+-- script.js

Die Datei data.json könnte diese Struktur widerspiegeln und in etwa so aussehen:

{
  "cygcyg": {
    "audio": "./mp3/singschwan.mp3",
    "description": "Singschwan, Flugrufe",
    "image": "./img/singschwan.png",
    "page": "./pages/singschwan.html",
    "title": "Der Singschwan"
  },
  "cygolo": {
    "audio": "./mp3/hoeckerschwan.mp3",
    "description": "Höckerschwan, Rufe (im Hintergrund Bruchwasserläufer, Wasserralle und Kreuzkröten)",
    "image": "./img/hoeckerschwan.png",
    "page": "./pages/hoeckerschwan.html",
    "title": "Der Höckerschwan"
  }
}

In der Datei script.js müsste dann die Intelligenz stecken, die Links auf die Unterseiten "erkennt" und Klicks darauf abfängt, um die Tooltip-artige Anzeige zu realisieren. Mit den Daten aus data.json kann sie wissen, welche Informationen zu welchen Links gehören.

In der JSON-Datei könnte man auch den Dateinamen der HTML-Datei als "Schlüssel" verwenden, also nicht "cygcyg": {...}, sondern "./pages/singschwan.html": {} schreiben. Damit entfiele der Eintrag "page" in allen Datensätzen.

Für die Intelligenz im JavaScript müssten wir neu quatschen. Da will ich Dir keine fertige Lösung vorsetzen.

Liebe Grüße

Felix Riesterer