tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
1069
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    stefancp stefancp ist offline Mitglied Bronze
    Registriert seit
    Dec 2004
    Beiträge
    28
    Hallo Leute,

    ich habe folgendes Problem...
    In meiner Webseite soll beim Klick auf eines von 8 Thumbs zum einen das Bild im Anzeigefenster geändert werden (klappt auch) und zum anderen der Text daneben.
    Ich habes es nun so gelöst, dass ich bei der Anweisung onclick zwei Variablen an eine Funktion übergebe. Die erste gibt an, welches Bild in dem Fenster angezeigt wird und die zweite, welches von 8 divs angezeigt werden soll. Diese divs hab ich allesamt erzeugt, per div
    positioniert und per display=none" ausgeblendet. Um sicherzustellen, dass die Texte nicht
    einander überdecken, soll die Funktion per For-Schleife alle divs ausblenden (über den Style display=none).
    Die Funktion sieht wie folgt aus:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    
    function bildwechsel(bild, text) {
    document.images.showpicture.src=bild;
    var blankid = "showtext0";
    for (var i = 0; i < 9; i++) {
    document.getElementById(blankid + i).style.display="none";
    } 
    document.getElementById(text).style.display="inline";
    }

    Der HTML-Code dazu:
    HTML-Code:
    <a href="#" onClick="bildwechsel('../../bilder/typen/efh01_gr.gif', 'showtext01')"><img class="typ_thmb" style="margin-left: 218px; margin-top: 148px" src="../../bilder/typen/efh01_kl.gif"></a>
    <a href="#" onClick="bildwechsel('../../bilder/typen/efh02_gr.gif', 'showtext02')"><img class="typ_thmb" style="margin-left: 297px; margin-top: 148px" src="../../bilder/typen/efh02_kl.gif"></a>
    <a href="#" onClick="bildwechsel('../../bilder/typen/efh03_gr.gif', 'showtext03')"><img class="typ_thmb" style="margin-left: 376px; margin-top: 148px" src="../../bilder/typen/efh03_kl.gif"></a>
    .
    .
    .
    <div class="typ_show_txt" id="showtext01" style="margin-top: 275px; display:inline">3&nbsp;Zimmer<br>120,65qm&nbsp;Wfl.<br>46,48qm&nbsp;Nfl.<br>Keller<br>Ausbaureserve</div>
    <div class="typ_show_txt" id="showtext02" style="margin-top: 275px; display:none">4&nbsp;Zimmer<br>100,65qm&nbsp;Wfl.<br>66,48qm&nbsp;Nfl.<br>Keller<br>Ausbaureserve</div>
    .
    .
    .
    was passiert ist, dass lediglich der text aus dem tag 'showtext01' permanent angezeigt wird und die Bilder sich durchschalten lassen, aber es wird weder der Text gelöscht noch ein anderer 'showtext' eingeblendet.

    Kann mir jemand helfen?

    Danke im Voraus und Gruß, Stefan
     

  2. #2
    abla abla ist offline Mitglied Silber
    Registriert seit
    Jun 2004
    Beiträge
    50
    So ein ähnliches Problem hatte ich auch einmal.
    Da das ein und ausblenden nicht immer richtig funktioniert hat habe ich zwei neue CSS Klassen angelegt.
    show{}
    hidd{display:none;}

    Jetzt musst du anstatt
    document.getElementById(blankid + i).style.display="none";
    den Klassennamen ändern.
    document.getElementById(blankid + i).className = "hidd";
    oder
    document.getElementById(blankid + i).className = "show";

    dann geht es sicher!
    Da du ja schon CSS Klassen verwendest musst du das mit deinen Klassen machen.

    z.B.
    typ_show_txt
    typ_hidd_txt
     

Ähnliche Themen

  1. Mehrere DIVs nacheinander ein/ausblenden (fadeIn/fadeOut)
    Von Rigoo im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 28.12.10, 15:29
  2. DIVs ausblenden
    Von Stelo im Forum Javascript & Ajax
    Antworten: 12
    Letzter Beitrag: 20.05.10, 12:54
  3. OnClick - 2 Divs ausblenden, 1 Div einblenden
    Von waswiewo im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 17.05.10, 20:20
  4. DIVs via JS ausblenden
    Von aargau im Forum Javascript & Ajax
    Antworten: 10
    Letzter Beitrag: 26.06.08, 10:24
  5. divs ein-/ausblenden
    Von herrgarnele im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 04.06.07, 18:04