Beiträge von Sempervivum

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

    Ü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:

    JavaScript
    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
}];

  • jQuery selektor

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

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

    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:

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

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

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

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

    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?

  • Tags aus mp3-Dateien auslesen

    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:

  • Tags aus mp3-Dateien auslesen

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

    JavaScript
    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:

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

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

  • Tags aus mp3-Dateien auslesen

    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:

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

  • Tags aus mp3-Dateien auslesen

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

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

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

  • Tags aus mp3-Dateien auslesen

    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!

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

    Dann mach es doch so:

    HTML
    <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');"/>
    HTML
    <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.

  • Tags aus mp3-Dateien auslesen

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

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

    Oder so:

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

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

    Zitat

    Jetzt müssen meine Menüs nur noch visible bleiben, bis ich die "Menü-Fläche" oder die auslösende area im Hauptbild verlasse...

    Das verstehe ich nicht: Dass das Menü beim Verlassen der Area wieder unsichtbar wird, hast Du doch schon programmiert. Aber wenn das so ist, ist das Menü doch gar nicht bedienbar, weil es ja verschwindet, wenn man die Maus dorthin bewegt.
    Oder möchtest Du, dass das Menü erscheint, wenn man mit der Maus die Area betritt und erst verschwindet, wenn man mit der Maus das Menü verlässt?

    Du hast es jetzt zwar mit dem Wechsel des Bildes gelöst, aber man kann das Einfärben der Bereiche auch dynamisch mit Javascript machen:
    http://www.netzgesta.de/mapper/

    Das wäre zu empfehlen, wenn Du später noch weitere Areas hinzu fügen möchtest, dann musst Du nicht jedes Mal ein neues Bild anfertigen.


    Hast Du auch bedacht, was auf Touch-Geräten passiert, die kein Mouseover haben?

  • Tags aus mp3-Dateien auslesen

    So, mit dem Einfügen des Bildes und der Tags im Kopf bin ich fertig. Du kannst es ja noch nach deinen Vorstellungen stylen.

  • Tags aus mp3-Dateien auslesen

    Zitat

    Bei mir sollen ja "nur" 8 Tags pro mp3 ausgelesen werden.

    Diese Zeile im PHP:

    PHP
    $ThisFileInfo = $getID3->analyze($filename);



    liest alle Tags aus. Welche man dann verwendet, spielt keine Rolle.

    Zitat

    Lasse Dich nicht irritieren: Es ist exakt der html5-List-Player von dem Herrn Weisshart > erl ässt sich via CSS anders layouten! Das habe ich gemacht.

    Man kann das Umfeld des Player layouten, aber der Player selbst mit seinen Controls sieht in jedem Browser anders aus. Das Layout in deiner Grafik ist das von Firefox. Probiere es mal mit einem anderen Browser!
    Aber wir können das erst Mal zurück stellen.

    Was das Laden betrifft, habe ich es gerade mit deiner Testseite ausprobiert und diese lädt wirklich sehr schnell. Wenn das so ist, können wir das Neuladen wahrscheinlich akzeptieren und ich werde jetzt mit dem Einfüge der Tags in den Kopf weiter machen.