Du bist nicht angemeldet.

21

Donnerstag, 12. Januar 2017, 22:28

danke dass du dich meiner annimmst, ehrlich!
Das hatte ich auch schon probiert, aber funzt leider nicht...
Ich hab das jetzt mal versucht überschaubar zu halten:

https://jsfiddle.net/tazpjqwk/8/

In dem fidele hat jetzt das blaue Bild unter #content1 (Ausklapp-Menü-Punkt 1) das gleiche rote hover backkround-image, wie das grüne Bild unter #content2 (Ausklapp-Menü-Punkt2).
Ich möchte jetzt aber, dass das grüne Bild im content 2 ein anderes hover Background-image hat, sagen wir zB ein gelbes -> https://www.wallpaper-gratis.eu/farben-f…6_1400x1050.jpg

22

Donnerstag, 12. Januar 2017, 22:32

oha... ja das macht bestimmt Sinn aber ich glaub das probier ich frühestens, wenn ich die unüberschaubare-version zum Laufen gebracht habe... aber danke! :-)

23

Donnerstag, 12. Januar 2017, 22:44

Dieses sollte funktionieren:
https://jsfiddle.net/Sempervivum/tazpjqwk/9/

Ich habe den areas noch jeweils ein Klasse area1 und area2 gegeben und diesen für das Hover das entspr. Hintergrundbild.

24

Freitag, 13. Januar 2017, 12:27

Genau so! Großartig! VIELEN DANK ! :thumbsup:
Ich setze meine diversen Content-Bereiche zeitnah um und dann schau ich mir nochmal deinen Vorschlag mit der Liste an. Das traue ich mir mit meinem semi-guten Grundwissen noch nicht so zu... wenn ich dich richtig verstehe, kommen die Daten dann in eine Excelei, die dann durch das JS ausgelesen wird?

25

Freitag, 13. Januar 2017, 12:33

Zitat

Ich setze meine diversen Content-Bereiche zeitnah um
Wenn Du dich für die Version mit der Liste entscheidest, kannst Du dir viel Arbeit ersparen, wenn Du es nicht vorher händisch machst, sondern gleich mit der Liste. Hinterher, wenn alles fertig ist, macht es keinen Sinn mehr. Ich würde dir dann das Skript für die Bearbeitung der Liste erweitern.
Man kann zwar eine Excel-Liste in eine CSV-Datei exportieren und dann mit Javascript bearbeiten, aber bei der vorliegenden Struktur würde ich das nicht empfehlen, sondern den String im JSON-Format händisch erstellen.

26

Freitag, 13. Januar 2017, 20:49

Oh man, das klingt echt gut aber da hab ich sowas von keine Ahnung von und wäre absolut (wieder) auf deine Hilfe angewiesen.... es wäre ein Traum, wenn ich die Daten in einer Liste pflegen könnte und dadurch die CSS und auch die HTML-Datei übersichtlicher zu halten.

27

Freitag, 13. Januar 2017, 22:24

Ich habe mich für eine Lösung mit PHP entschieden, weil die Seite dann auch ohne Javascript funktioniert. Die Dateien lade ich als gezippt als Anhang hoch. Die CSS-Datei liegt in einem Unterverzeichnis "css", das kannst Du jederzeit ändern. Die Liste ist $areas_json in areas.php, diese musst Du für deine Zwecke umändern und erweitern. Ich hoffe, der Aufbau ist selbst erklärend und Du kannst dich in die Syntax des JSON hinein denken. Wenn nicht, frage nach. In der linken oberen Ecke wenn Du areasindex.php im Browser öffnest, siehst Du einen Hinweistext, der angibt, ob das JSON OK ist. Du kannst das JSON auf dieser Seite überprüfen, ob sie fehlerfrei ist bzw. Fehler anzeigen lassen:
http://jsonlint.com/
Dazu musst Du das JSON ohne die umschließenden einfachen Hochkommas kopieren und auf der Seite einfügen. Ich empfehle, das JSON gleich auf dieser Seite zu editieren und wenn es fertig und fehlerfrei ist, in die PHP-Datei zu kopieren.
Aus dem JSON erzeugt das Skript sowohl das CSS:

PHP-Quelltext

1
<?php makecssall(); ?>


als auch das HTML für jeweils einen Content-Bereich:

HTML

1
                <div id="content1" class="content"><?php makehtml("content1"); ?>


Da die Kopfseite areasindex.php PHP benötigt, wird sie nur auf einem Webserver funktionieren.

Wenn etwas nicht funktioniert, musst Du dich wieder melden.
Man hätte es auch mit Excel machen können, aber dann wäre das Handling und vor allem das Parsing komplizierter geworden.
»Sempervivum« hat folgende Datei angehängt:
  • areas.zip (2,67 kB - 10 mal heruntergeladen - zuletzt: 12. März 2017, 15:12)

Ähnliche Themen