Beiträge von Jochen

  • Mehere Container selektiv ansteuern

    Hab wohl etwas falsch gemacht. Vielleicht bin ich durcheinander gekommen mit cont, conts usw. Ich muss auch zugeben ich habe die Idee verstanden aber die umsetzung verstanden in der Funktion zeile
    var conts = document.querySelectorAll("div[id^='cont']");


    da steht auf einmal cont während später conts gebraucht wird, ich selber auch cont in meinem code hatte.


    Wenn du den Code noch hättest würde ich ihn gerne erhalten, da ich den Ansatz mit querySelectorAll interessant finde
    und ich ihn sicher irgendwo noch einmal sinnvoll einsetzen kann.


    Dir auch ein schönes Fest und ein tolles 2017


    Jochen

  • Mehere Container selektiv ansteuern

    Ich habe 3 Container die ich über einen href individuell sichbar machen möchte,Ich kann mit dem beigefügten Code die einzenen Contasiner ansteuern.
    Aber:


    Wenn ich ZUERST auf Cont3 klicke, kann ich danach auch auf Cont2 klicken und danach auf Cont1 mit der entsprechenden Anzeige dann


    Wenn ich jetzt auf Cont2 klicke, kann ich danach auch auf Cont1 klicken, klicke ich auf Cont3, damnn passiert nichts.


    Wenn ich ZUERST auf Cont1 klicke, dann erscheint der entsprechende Container aber ein darauffogendes Anklicken von Cont2 oder Cont3 funktioniert nicht.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>2 container</title>
    <meta name="author" content="chef">
    <meta name="editor" content="html-editor phase 5">
    </head>


    <script>
    function show_elements()
    {
    var elementNames = show_elements.arguments;
    for (var i=0; i<elementNames.length; i++)
    {
    var elementName = elementNames;
    document.getElementById(elementName).style.display='block';
    }
    }
    </script>


    <style>


    * { margin:0px; padding:0px;}


    html, body { height: 100%;}
    body{ font-family: verdana;background: #F8F2E2;
    background: linear-gradient(left, #F8F2E2 0%, #F7BE81 99%, #F7BE81 100%);
    background: -webkit-linear-gradient(left, #F8F2E2 0%, #F7BE81 99%, #F7BE81 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F8F2E2, endColorstr=#F7BE81,GradientType=1); }
    #wrapper{ width: 1050px; height: 100%; margin: 0px auto;}
    #platzhalter{ width:100%; height:150px; float:left;}



    #sidebar .submenu{margin-top: 30px; width: 23% ; float: left; height: 100%;}
    #sidebar .submenu li{ float: left; height: 60px;}
    #sidebar .submenu li a{list-style-type:circle; text-decoration:none; font-size:16px; font-weight:400; text-align:left;
    line-height:20px; color: black; display:block; float:left; width:250px;
    }


    #cont1 {
    width: 75%;
    float: left;
    height: 100%;
    color: black;
    display:none;
    }


    #cont2 {
    width: 75%;
    float: left;
    height: 100%;
    color: black;
    display:none;
    }
    #cont3 {
    width: 75%;
    float: left;
    height: 100%;
    color: black;
    display:none;
    }


    </style> <body>


    <div id="wrapper">
    <div id="platzhalter"> Platzhalter für Header </div>


    <section id="sidebar">


    <ul class="submenu">
    <li><a href="#"onClick="show_elements('cont1');">C1</a></li>
    <li><a href="#"onClick="show_elements('cont2');">C2</a></li>
    <li><a href="#"onClick="show_elements('cont3');">C3</a></li>


    </ul>


    </section>


    <div id ="cont1"> Hier ist C1!</div>
    <div id ="cont2"> Hier ist C2!</div>
    <div id ="cont3"> Hier ist C3!</div>


    </div>
    </body>
    </html>


    Was ist zu tun?


    Freundliche Grüße und ein frohes Fest


    Jochen


  • Bild erscheint nicht

    :) Ich habe es erfolgreich getestet. Bilder an ein Arry zuzuweisen funktioniert.



    var Bilder = new Array()
    function Vorladen01() {for (i = 0; i < BildListe.length; i++) {Bilder = new Image();Bilder.src = BildListe[i]; }}

    Vorladen01();


    Der Fehler im meinem Code war, dass ich das Bild in eine Klasse eingebunden hatte.


    Dank


    Jochen
    [/i]

  • Bild erscheint nicht

    Es hat im Testmodus funktioniert. Nachdem ich die Statments incl onmouseover in das eigentliche Programm kopiert habe, funktioniert es nicht mehr.
    Ich schicke hier den Code. Vielleicht sieht jemand auf den ersten Blick was ich falsch gemacht habe. Hoffentlich.
    LG
    Jochen


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Lebe Smart</title>
    <link type="text/css" rel="stylesheet" media="screen" href="smartcss.css"/>


    <script>


    var BildListe = new Array();
    BildListe[0] = "bild0.png";
    BildListe[1] = "bild1.png";
    BildListe[2] = "bild2.png";
    BildListe[3] = "bild3.png";


    var Bilder = new Array()
    function Vorladen01() {for (i = 0; i < BildListe.length; i++) {Bilder[i] = new Image();Bilder[i].src = BildListe[i]; }}


    Vorladen01();


    function bildanzeigen(id) {document.getElementById("dasbild").src = Bilder[id].src;}


    function faerbe(id)
    {
    var farben = new Array('#aa3','#aa6','#aa9','#aac','#aaf','#abf');
    document.getElementById('container').style.backgroundColor=farben[id];
    }


    </script>


    </head>
    <body>


    <div id="wrapper">
    <header id="mainheader">
    <div id= "headerbild">
    <h2>Lebe Smart</h2>
    </div>
    </header>


    <ul id="navmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#"onmouseover="bildanzeigen(0);">1.Styling</a>


    <ul class= "sub1">
    <li><a href="#"onmouseover="bildanzeigen(1);">Konzentrat</a>


    <ul class= "sub2">
    <li><a href="#">Aufwärmen</a></li>
    <li><a href="#">Heiß laufen</a></li>


    </ul>
    </li>
    <li><a href="#">usa</a></li>
    <li><a href="#">gbt</a></li>
    <li><a href="#">ko</a></li>


    </ul>
    </li>
    <li><a href="#">2.Styling</a></li>
    <li><a href="#">3.Styling</a></li>
    <li><a href="#">Spiel</a></li>
    <li><a href="#">Unterwegs</a></li>
    </ul>


    <div class="area-all">
    <div class="area-zero"> </div>
    <div class="area-one">


    </div>
    <div class="area-two"><img src="basis.jpg" alt=""></div>
    <div id="textfeld"> Bleib in Bewegung</div>
    </div>
    </div>
    </body>
    </html>

  • Ausgangszustand (Bild Farbe) wiederherstellen

    Meine Lösung ist keine richtige Lösung, ist auch nicht in meinem ursprünglichem Sinn. Jedesmal wenn ich auf einen der Links komme lösche ich das Startnbild. Ich habe diesen Weg gewählt weil ich zu der Meinung gelangt bin, dass meine Wuschlösung nicht realisierbar ist. Und du scheinst das ja auch gerade zu bestätigen.


    Anyway, herzlichen Dank


    Jochen

  • Ausgangszustand (Bild Farbe) wiederherstellen

    Wenn ich mit der Maus über die einzelnen Links gehe, ändert sich die Farbe im Container und die Bilder.


    Wenn ich die einzeln Links mit der Maus verlasse, bleibt der augentliche Zustand bestehen. Ich möchte aber bei mouseout den Ausgangszustand wieder herstellen. Zum Beispiel soll der Container wird in Blau erscheinen statt in einer der Farben aus dem Array(siehe unten).
    Ich weiß, dass ich dies mit Display: none machen kann. Ich möchte aber nicht bei jedem einzelnen Link dies realisieren sondern generell wenn ich den Navigationsbereich mit der Mouse verlasse, egal auf welchem Link ich zuletzt mit der Maus war.


    Hier der Code


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>


    ul#navmenu {
    margin-top:2px;
    width: 1050px;
    height:35px;
    background-color:#F7BE81;
    float:left;
    border: 2px solid red;
    }


    ul#navmenu li{
    margin-right: 5px;
    width: 125px;
    text-align:left;
    position: relative;
    float: left;
    border: 1px solid blue;
    }


    ul#navmenu a{
    padding-left: 3px;
    text-decoration:none;
    width: 125px;
    height: 35px;
    line-height: 35px;
    background-color: #F7BE81;
    color:black;
    display: block;}



    #container{ float: left; width: 400px; height:400px; background: blue;}


    </style>


    <script>


    var BildListe = new Array();
    BildListe[0] = "bild0.png";
    BildListe[1] = "bild1.png";
    BildListe[2] = "bild2.png";
    BildListe[3] = "bild3.png";


    var Bilder = new Array()
    function Vorladen01() {for (i = 0; i < BildListe.length; i++) {Bilder[i] = new Image();Bilder[i].src = BildListe[i]; }}


    Vorladen01();


    function bildanzeigen(id) {document.getElementById("dasbild").src = Bilder[id].src;}


    function faerbe(id)
    {
    var farben = new Array('#aa3','#aa6','#aa9','#aac','#aaf','#abf');
    document.getElementById('container').style.backgroundColor=farben[id];
    }


    </script>
    </head>


    <body>
    <ul id="navmenu">
    <li><a href="#"onmouseover="faerbe(0);bildanzeigen(0);">Nice</a></li>
    <li><a href="#" onmouseover="faerbe(1);bildanzeigen(1);">...</a>


    <ul class= "sub1">
    <li><a href="#"onmouseover="faerbe(2);bildanzeigen(2);">to</a>
    <ul class= "sub2">
    <li><a href="#"onmouseover="faerbe(3) ;bildanzeigen(3);">meet</a></li>
    <li><a href="#"onmouseover="faerbe(4) ;">you</a></li>
    </ul>
    </li>


    <li><a href="#"onmouseover="faerbe(5) ;">here</a></li>
    </ul>
    </li>
    <li><a href="#"onmouseover="faerbe(6);">today</a></li>
    </ul>


    <img id="dasbild" src="bild3.png" width="300" height="350">
    <div id="container"></div>


    </body>
    </html>


    Ich hoffe ich konnte meine Frage deutlich machen.


    LG
    Jochen

  • Zwei Anweisungen über einen Link

    Ich habe zwei JS Funktionen.


    Funktion 1 : faerbe (Dank an Jav)
    Funktion 2 : Bild anzeigen.


    Kann ich in einem Link beide Funktionen gleichzeitig aufrufen?


    Beispiel: ( Anmerkung: Es funktioniert nicht , es soll nur zeigen was ich suche)


    <a name="home" onmouseover="faerbe(0)"+ onmouseover="bildnr0()"> Home</a>


    Wenn ich den Link mauser soll sich bei Container 1 die Farbe ändern UND das Bild 0 an anderer Stelle angezeigt werden.


    LG
    Jochen

  • Blider mit Links verknüpfen

    Ich will nur die Steuerung der ersten Seite nachbauen mit Bilder erscheinen und verschwinden wenn man die Links anklickt. Und das mache ich mit eurem Vorschlag. Also nichts mit ab in die Tonne.
    Einen schönen Tag noch wünsche ich


    Jochen

  • Blider mit Links verknüpfen

    Also erst noch mal meinen herzlichsten Dank an euch, Meister der Codierung.

    Ich versuche die erste Seite von Calida nach zu bauen. Die finde ich einfach von der Steuerung her super., mag auch an den Mädels liegen ;) .


    http://www.calida-shop.de/?adw…da/Calida%20Global/calida


    Sie birgt darüber hinaus viele interessante Ansätze, die nachzuvollziehen mir nochg einige Nerven und Tage kosten werden. Es wird für mich eine Herausforderung werden..


    Ich arbeite an einer Homerpage, die sich an Männer um und über 50 Jahre richten wird. Sie hat den Titel Lebe Smart.


    LG


    Jochen

  • Blider mit Links verknüpfen

    Tut mir leid, das ist kein böser Wille sondern Unkenntnis.


    Die Seiten, an denen ich arbeite, sollen nur auf einem Laptop und Desktop laufen.



    Ich habe bestimmt mehr als einen halben Tag rum gesucht ud bestimmt mehr als einen Tag diverses versucht, habe aber keine Idee und schon recht keine Lösung außer Hover gefunden-
    Wenn es doch eine andere Möglichkeit als Hoover (außer Javascript) gibt um die Farbe im
    Container zu ändern, nehme ich sie gerne wahr.Es darf nur nicht zu komliziert
    sein da ich kein Experte für Htlm5 und CSS bin. Ich arbeite mich noch
    ein.


    LG


    Jochen

  • Blider mit Links verknüpfen

    Da bin ich aus versehen auf den Absende Botton gekommen.


    Aber ich hoffe ich habe mich trozdem verständlich ausgedrückt.


    Die grundsätzlich Frage ist: Wie muss ich den Code anpassen wenn ich die Navigation untergliedere(2 Ebenen)?
    Dann muss ich nach meinen jetzigen Kenntnissen mit Li arbeiten, und dann funktioniert #Link1 usw nicht, oder?


    LG


    Jochen

  • Blider mit Links verknüpfen

    :) :) :) :) :) :) :) :) :) :) :) :) :) :) :)


    Genau das habe ich mehr als einen Tag lang versucht. Dank dir, aber auch den anderen.Tolles Forum!!!!!!!!!!!!!!!!!!!!!!!!!!


    Aber: ich habe noch eine Frage;


    Wie verändere ich die Farben im Container wenn ich die Navigation untergliedern möchte.
    Zum Beispiel:


    <li><a href="#">Seite 1 </a>
    <ul>
    <li><a href="#">Seite 2 </a></li>
    <li><a href="#">Seite 3 </a></li>
    <li><a href="#">Seite 4 </a>
    <ul>
    <li><a href="#">Thema 4.1 </a></li>
    <li><a href="#">Thema 4.2 </a></li>


    </ul>
    </li>
    </ul>
    </li>



    Wenn ich die Gliederung erstelle indem ich mit Li die Unterseiten einschliesse funktioniert es leider nicht mehr

  • Blider mit Links verknüpfen

    Ich habe den ganzen Tag es probiert. Ich bekomme es nicht hin.Ich habe mit dem Hover Probleme- Wenn ich über die Navi Leiste gehe
    möchte ich (hier im Beispiel) die Farbe im Container geändert haben.


    Ich schicke aus Verzweifelung den Code. Vielleicht findet jemand den Fehler?
    <body>
    <div id="nav">
    <ul>
    <li><a href="#Seite1">Bild 1</a></li>
    <li><a href="#Seite2">Bild 2</a></li>
    <li><a href="#Seite3">Bild 3</a></li>
    </ul>
    </div>
    <div id = "container">
    </body>


    #nav a {
    padding-left: 3px;
    width: 125px;
    height: 35px;
    line-height: 35px;
    color:black;
    display: block;
    }
    #container{
    float: left;
    width: 400px;
    height:400px;
    background: blue;
    }



    #nav li a#Seite1:hover #container {
    background:green);
    }
    #nav li a#Seite2:hover #container {
    background:red);
    }

  • Blider mit Links verknüpfen

    ich habe eine Navigationsleiste mit 5 Links. Ich möchte jeden Link mit einem eigenen Bild verknüpfen. Wenn ich mit der Maus über Link 1 gehe, soll das Standard Backgroundbild verschwinden und Bild 1 erscheinen . Wenn ich über Link2 gehe, soll das Bild2 erscheinen usw. Vielleicht weiß einer von euch wie das klappt.


    Gruß Jochen