Beiträge von Sempervivum

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/quest…sion-from-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?

Gar nicht verwirrend. Ich hatte es zunächst auch so verstanden, aber dann in meine Testdatei gesehen, die ich früher von dir übernommen hatte und dort keine Skriptdatei gefunden. In deiner endgültigen Seite habe ich es jedoch gefunden. Wenn Du mein Skript in deins übernimmst, das Du im Header einziehst, musst Du es in das document-ready schreiben:

$(document).ready(function() {
		$('.menubutton').click(function() {
			$('nav').slideToggle('slow');
		});
                window.addEventListener("beforeunload", function () {
                    window.localStorage.setItem("scrollLeft" + window.location.pathname, $(window).scrollLeft());
                    window.localStorage.setItem("scrollTop" + window.location.pathname, $(window).scrollTop());
                });
                var leftPos = window.localStorage.getItem("scrollLeft" + window.location.pathname);
                var topPos = window.localStorage.getItem("scrollTop" + window.location.pathname);
                $(window).scrollLeft(leftPos);
                  $(window).scrollTop(topPos);	});

Ganz korrekt ist dein Entwurf noch nicht, es muss so aussehen:

window.addEventListener("beforeunload", function () {                window.localStorage.setItem("scrollLeft" + window.location.pathname, $(window).scrollLeft());
                window.localStorage.setItem("scrollTop" + window.location.pathname, $(window).scrollTop());
            });
            var leftPos = window.localStorage.getItem("scrollLeft" + window.location.pathname);
            var topPos = window.localStorage.getItem("scrollTop" + window.location.pathname);
            $(window).scrollLeft(leftPos);             $(window).scrollTop(topPos);

Wenn Du das in eine Datei, z. B. scrollto.js schreibst, musst Du diese, analog zu jQuery, so einziehen:

<script src="scrollto.js"></script>

ggf. mit Verzeichnis, wenn Du sie in ein Unterverzeichnis legst.

Was das Einbinden von jQuery betrifft: Wenn Du diese Zeile schon hast, solltest Du jQuery nicht ein zweites Mal einbinden.

Natürlich kannst Du das Javascript in eine Datei einziehen und auf allen Seiten verwenden. Du musst jedoch bedenken, dass es nur bei einem Neuladen der gleichen Seite funktioniert. Wenn Du eine neue Seite lädst, wird die Scrollposition der vorigen Seite eingestellt und das ist ja sicher nicht das, was Du willst. Man kann das aber ändern, indem man die URL der Seite in den Item-Namen mit aufnimmt, etwa so:

window.localStorage.setItem("scrollLeft-" + window.location.pathname, $(window).scrollLeft());

Ich habe da mal etwas ausgearbeitet:
https://jsfiddle.net/ao6Le32x/3/

Damit brauchst Du nur ein zusätzliches, rot eingefärbtes Bild.
Statt einer image-map habe ich für jeden Bereich ein div über das Bild gelegt. Das funktioniert natürlich nur mit rechteckigen Bereichen, aber ich glaube, das trifft bei dir zu.
Schau mal, ob das das ist, was Du dir vorgestellt hast.

Um es browserübergreifend zum Laufen zu bringen, musste ich jquery verwenden. Binde es im head ein:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

und füge dieses Javascript am Ende des body, vor dem schließenden </body> ein:

<script>            window.addEventListener("beforeunload", function () {                window.localStorage.setItem("scrollLeft", $(window).scrollLeft());                window.localStorage.setItem("scrollTop", $(window).scrollTop());            });            var leftPos = window.localStorage.getItem("scrollLeft");            var topPos = window.localStorage.getItem("scrollTop");            $(window).scrollLeft(leftPos);            $(window).scrollTop(topPos);         </script>

Zitat

nun lädt die Seite ja immer neu und springt dabei nach oben. Gibt es eine Funktion, dass die Seite "stehen bleibt" auch wenn sie neu lädt?

Ja, man kann die Scrollposition im Localstorage speichern und beim Neuladen die wieder herstellen. Mache ich dann ...

Sehr gelungenes Design!

Dann mach es doch so:

<area   shape="rect" coords="510,32,640,328" href="javascript:showMenu('menu4');"
   onmouseover="changeImage('bild_40.png'); document.getElementById('menu4').style.display = 'block';"
   onmouseout="changeImage('bild.png');"/>

<div id="menu4" onmouseout="this.style.display = 'none';"> 
         Menu 4 
        <a href="link1.htm">Link1</a> 
        <a href="link2.htm">Link2</a> 
        <a href="link3.htm">Link3</a>    </div>

Eleganter wäre es jedoch, das Menü so zu positionieren, dass es die Area überlappt, so dass man ohne Unterbrechung von einem zum anderen hovern kann.

Tabellen für Layoutzwecke sind heutzutage stark verpönt. Ich empfehle, die Elemente mit CSS nebeneinander anzuordnen:

#infoimg {                float: left;
            }
            #infolis {
                margin-left: 150px !important;             }

Oder so:

#infolis {                display: inline-block;
                width: calc(100% - 150px);
            }
            #mp3infos img {
                vertical-align: top;             }