Ergebnis 1 bis 6 von 6

Thema: Textfeld

  1. #1
    19daddel19 19daddel19 ist offline

    Textfeld

    Hallo zusammen

    Ich bastle gerade an einer Homepage herum. Aber nun komm ich nicht weiter.
    Ich möchte viele lange Texte auf eine Seite bringen. Diese sollten aber nicht untereinander angeordnet sein.
    Ich habe mir gedacht, dass ich oben die Titel der Texte hinschreibe.
    Unten wäre dann ein grosses Feld. Wenn man jetzt einen Titel anklickt soll der unten in dem Textfeld erscheinen.
    Also eine Art Inlineframe, aber ebe ich will alles auf eine Seite kriegen, also der Quellcode soll nur auf einer Seite sein.

    Ist dies so möglich? Wäre es auch möglich das Textfeld je nach Text einen Hintergrund zuzuordnen, damit jeder Text ein anderes Hintergrundbild hat?
    Ich schreibe meine Homepage in HTML.

    Danke für eure Antworten.
    daddel

  2. Anzeige

    Textfeld

    Schau dir mal diesen Bereich an. Dort ist für jeden was dabei!
  3. #2
    Das_Es Das_Es ist offline
    Avatar von Das_Es

    AW: Textfeld

    Das Sollte so die Funktion erfüllen, ist aber nur eine grobe Version, die wahrscheinlich auch noch Verbessert werten kann
    In Header
    HTML-Code:
    <style>
        .ueberschriften { size:110%; color:#FF0000; margin:5px; cursor: pointer; }
        .uberaktiv { background-color:#00FF00 }
        .textshow { }
        .texthide { display:none}
        #Textazeige { width: 500px; }
    </style>
    
    <script type="text/javascript">
        var Texte = new Array();
        function InitVars() {
            Texte[0] = new Object();
            Texte[0]["Schalter"] = document.getElementById("TitelText1");
            Texte[0]["Text"] = document.getElementById("Text1");
            
            Texte[1] = new Object();
            Texte[1]["Schalter"] = document.getElementById("TitelText2");
            Texte[1]["Text"] = document.getElementById("Text2");
            // Hier kommt noch andere Textfelder ect rein
        }
        function wechsel(Id) {
            for(i=0; i<Texte.length; i++) {
                if(Texte[i]["Schalter"].id == Id) {
                    Texte[i]["Text"].className = "textshow";
                    Texte[i]["Schalter"].className = "ueberschriften uberaktiv";
                }
                else {
                    Texte[i]["Text"].className = "texthide";
                    Texte[i]["Schalter"].className = "ueberschriften";
                }
              }
        }
    </script>
    beim Body
    HTML-Code:
    <body onload="InitVars()">
    
    ...
    
    <span id="TitelText1" class="ueberschriften uberaktiv" onclick="wechsel(this.id)">Text 1</span><span id="TitelText2" class="ueberschriften" onclick="wechsel(this.id)">Text 2</span>
    <div id="Textazeige">
        <div id="Text1" class="textshow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        </div>
        <div id="Text2"  class="texthide">
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
         </div>
            
    </div>

  4. #3
    19daddel19 19daddel19 ist offline

    AW: Textfeld

    Cool, es funktioniert!
    DANKE!

  5. #4
    19daddel19 19daddel19 ist offline

    AW: Textfeld

    Ich hab noch eine Frage zu deinem Code.
    Es funktioniert alles bestens. Nur weiss ich nicht wie man für jeden Text ein anderes Hintergrundbild einfügen kann?
    Kannst du mir da nochmals weiterhelfen?

    Ich wäre dir sehr dankbar.
    daddel

  6. #5
    Das_Es Das_Es ist offline
    Avatar von Das_Es

    AW: Textfeld

    Das wahrscheinlich einfachste wäre im css teil folgentes mit reinzuschreiben

    HTML-Code:
    #Text1 { background-image: url('/bilder/Texthindergrund1.gif'); }

  7. #6
    19daddel19 19daddel19 ist offline

    AW: Textfeld

    Danke, einfach super.

    Es funktioniert alles bestens!