Teile eines IMG mit hover versehen, welches jew. ein DropDown-Menü anzeigt

    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.e…ben/gelb006_1400x1050.jpg

    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! :)

    Genau so! Großartig! VIELEN DANK ! :thumbup:
    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?

    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.

    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.

    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
    <?php makecssall(); ?>


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

    HTML
    <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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden