Beiträge von Sempervivum

Verstehe ich soweit, bis auf dieses:

Zitat

Die Positionen können berechnet werden.

Wie lautet denn die Rechenvorschrift? Aus den Beispielen kann ich kein System erkennen?

Zitat

Nach Klick auf das 2 Bild in der ersten Reihe ist das 3 und 4 Bild in der 2 Reihe nicht mehr wählbar

Muss das erweiterbar sein, d. h. gibt es eine 3. Reihe, müssen dort auch Bilder gesperrt werden, gibt es eine 4. ebenso usw.? Und wie werden diese Bilder fest gelegt, sind sie vollkommen frei wählbar oder können die Positionen berechnet werden?

Zitat

Die Grafik wird getauscht und ein Klick darauf ist nicht mehr möglich.

Worauf soll das zutreffen, auf das geklickte Bild in der 1. Reihe oder auf die anderen Bilder?

Zitat

wie bekomme ich iii und jjj aus der obigen Funktion createTable raus und in eine andere Funktion rein mit der ich dann die Übereinstimmung überprüfen kann?

Ich würde die Sache etwas anders angehen und die Prüfung in der Callback-Funktion anstoßen (du brauchst ja sowie so den Klick als Anstoß), indem Du die Funktion, die die Prüfung machst, dort aufrufst und die benötigten Werte als Parameter übergibts.

Zitat

ich verstehe es zwar nicht

Dann will ich versuchen, es zu erklären. Verwendet man die Variablen i und j "einfach so" in der Callback-Funktion, hat man das Problem, dass diese nicht sofort ausgeführt wird, während die Schleife durchläuft, sondern erst später, wenn der Klick erfolgt. Zu diesem Zeitpunkt ist die Schleife längst durchgelaufen und die Variablen i und j haben ihre Endwerte.
Bei dem Code mit zwei verschachtelten Funktionen wird die äußere sofort aufgerufen, wenn die Schleife durchläuft. Sie hat i und j als Parameter und liefert die eigentliche Callback-Funktion als Rückgabewert zurück. In der äußeren Funktion haben dann die Parameter iii und jjj die Werte, die sie während des Schleifendurchlaufs hatten und die innere verwendet diese, wenn sie durch Klick aufgerufen wird.

Das ist leider ein bisschen kompliziert und sieht so aus:

function createTable(row, col, id) {

var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function (iii, jjj) {
return function () {
console.log(this.innerHTML, iii, jjj);
}
}(i, j));
currenttext = document.createTextNode(random());
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}
Das Forum hat leider die Zeilenumbrücke verschluckt, daher muss ich den Code ohne Tags posten.

Die Parameter der Listener-Funktion sind vordefiniert, Du kannst sie nicht einfach belegen, wie Du möchtest:
https://developer.mozilla.org/en-US/docs/Web…s#Event_handler's_parameters_this_binding_and_the_return_value
Mit "this" hast Du Zugriff auf das Element, das geklickt wurde und mit innerHTML kannst Du dann den Inhalt der Tabellenzelle ermitteln:

this.innerHTML

Hast Du die Funktion addEventListener() gefunden? Die musst Du mit deinen Tabellenzellen verknüpfen:

function createTable(row, col, id) { 
                var myTable = document.createElement("table");
                var mytablebody = document.createElement("tbody");
 
                for (var j = 0; j < row; j++) {
                    mycurrent_row = document.createElement("tr");
                    for (var i = 0; i < col; i++) {
                        mycurrent_cell = document.createElement("td");
                        mycurrent_cell.addEventListener("click", function() {console.log(this.innerHTML);})
                        currenttext = document.createTextNode(random());
                        mycurrent_cell.appendChild(currenttext);
                        mycurrent_row.appendChild(mycurrent_cell);
                    }
 
                    mytablebody.appendChild(mycurrent_row);
                }
 
                myTable.appendChild(mytablebody);
                myTable.setAttribute("ID", id);
                return myTable;             }

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

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

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

Zitat

Ich würde dir brackets vorschlagen.

Unterstützt der Fehleranzeige beim Editieren? Ich suche nämlich nach einem Ersatz für Webmatrix.
Edit: Hab's schon gefunden. Offenbar gibt es eine Erweiterung, die das kann.

Zitat

Was mir auffällt ist das man damit aber noch nicht einen Artikel durch den 2 Klick wieder abwählen kann und somit den Preis und die Beschreibung wieder auf empty setzt.

Ich hatte mir vorgestellt, dass Du das selbständig ergänzen kannst. So funktioniert es:
$(".productimg").on("click", function() { if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).attr("src", $(this).attr("data-src"));
$(this).siblings("span.productinfo").html("");
} else {
var selimg = $(this).siblings(".productimg.active");
selimg.attr("src", selimg.attr("data-src")).removeClass("active");
$(this).addClass("active");
$(this).attr("src", $(this).attr("data-src-sel"));
var htm = $(this).attr("data-name") + "<br>";
htm += $(this).attr("data-price");
$(this).siblings("span.productinfo").html(htm);
}
});
Edit: Leider verschluckt das Forum die Zeilenumbrüche. Ich habe den Code deshalb als Text ohne Tags eingefügt. Dabei gehen wiederum die Einrückungen verloren

Zitat

Den Code verstehe ich nicht wirklich da mir das Wissen von jQuery oder allgemein Javascript einfach fehlt.

Da bist Du auf dieser Website gleich an der richtigen Adresse: Sie enthält nicht nur dieses Forum sondern auch umfangreiche Anleitungen, mit denen man sich das Wissen erarbeiten kann.

Was jQuery betrifft, braucht man nur wenig Grundlagenwissen, um es anzuwenden und kann sich alles, was man braucht, jeweils aus dem Handbuch heraus lesen. Der Kern ist die Funktion $. Übergibt man ihr einen CSS-Selektor, ermittelt sie ein Array mit den passenden Elementen. Darauf kann man dann diverse Funktionen anwenden, z. B. attr(), um ein Attribut bei den Elementen zu setzen oder auszulesen.

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.

Hast Du auch jQuery eingebunden? Ich hatte den Code getestet und er funktioniert.

Schau mal, ob dir dies hilft:
http://stackoverflow.com/questions/6534…website-address

Persönlich schätze ich es aber weniger, wenn mein Browser nicht den wirklichen Dateinamen anzeigt.

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.

Übrigens:

Zitat

auf meiner Seite liegen nachher ca. 20 verschiedene hover-Bilder natürlich dann auch mit jeweils unterschiedlichen areas und ausgehenden Verweisen

Wenn es so viele sind, könntest Du überlegen, die Daten in einer Liste abzulegen und daraus das HTML bzw. DOM zu generieren, entweder mit JS oder mit PHP. Etwa so:

var data = [{    image: "url des Bildes",    bg_hover; "url des Hintergrundbildes bei Hover",    areas: [{        top: obere Position,        left: linke Position,        width: Breite,        height: Höhe,        linklabel: Beschriftung des Links im Menü        linkurl: URL des Links        },{        top: obere Position des zweiten Bereichs;           left:
        }]    }, {    Daten für den zweiten Content
}];

Wenn Du es so gemacht hast:

.area:hover {
    position: absolute;
    border: 0.5px dotted red;
}.area1:hover {   background-image: url("http://wallpaper-gallery.net/images/wallpaper-red/wallpaper-red-17.jpg");
}

würde ich eigentlich erwarten, dass es funktioniert. Wenn nicht, dass lege doch mal ein Fiddle oder eine Testseite mit zwei content-Containern an, damit man es testen kann.

Ich habe mal dieses ausgearbeitet (ohne Tabelle). Schau mal, ob es das ist, was Du brauchst:

<div id="row1">            <img class="productimg"
                 src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
                 data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg"
                 data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
                 data-name="Name1-1" data-price="8,50">
            <img class="productimg"
                 src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
                 data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg"
                 data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
                 data-name="Name1-2" data-price="11,50">
            <span class="productinfo"></span>
        </div>
        <style>
            .productinfo {
                display: inline-block;
                width: 200px;
                height: 200px;
                vertical-align: top;
            }    
        </style>
        <script>
            $(".productimg").on("click", function() {
                if ($(this).hasClass("active")) {
                     $(this).removeClass("active");
                     $(this).attr("src", $(this).attr("data-src"));
                } else {
                     var selimg  = $(this).siblings(".productimg.active");
                     selimg.attr("src", selimg.attr("data-src")).removeClass("active");
                     $(this).addClass("active");
                     $(this).attr("src", $(this).attr("data-src-sel"));
                     var htm = $(this).attr("data-name") + "<br>";
                     htm += $(this).attr("data-price");
                     $(this).siblings("span.productinfo").html(htm);
                }
            });         </script>

Zitat

wird also nach der Auswahl dargestellt mit Preis und Name im separaten <td>

Soll diese Zelle als letzte in der Reihe mit den Bilder angezeigt werden?

So funktioniert es:
https://jsfiddle.net/Sempervivum/tazpjqwk/6/

Ich habe lediglich das HTML des zweiten Fiddle, ohne #wrapper, in das div#content1 hineinkopiert und dem div#content1 zusätzlich die Klasse .content gegeben. Danach waren die area-divs zunächst nicht sichtbar. Das lag an dieser CSS-Anweisung:

#content  div {    padding: 10px;    display: none;}

Sie macht auch die area-divs unsichtbar. So funktioniert es:

#content > div {    padding: 10px;    display: none;}

Dies macht nur das unmittelbare Kindelement in der ersten Stufe unsichtbar.

Um bei mehreren content-Containern und ihren Inhalten den Überblick zu bewahren, empfehle ich eine zweistufige Nummerierung, so wie ich es im Fiddle gemacht habe:
Z. B. area1-3 im ersten div#content1, entspr. dann z. B. area2-4 im zweiten div#content2.
(War es dies, was Du mit hover-Nummer meintest?)
Das HTML und das CSS ist jetzt so umfangreich geworden, dass es schwer fällt, in den kleinen Fenstern des Fiddle den Überblick zu behalten.

Manche sagen "geht nicht - gibt' nicht" und ich bin ganz optimistisch, dass sich dein Vorhaben realisieren lässt. Allerdings verstehe ich nicht richtig, was Du vor hast und wo das Problem liegt. Du hast da zwei fiddles gepostet, das erste mit einem Aufklappmenü links und Content rechts. Das zweite mit dem Bild und den hover-Menüs an den Bereichen. Soll jetzt dieser Inhalt aus dem zweiten fiddle der Content im ersten werden?