On.Click text angezeigen...

[Hansi321]

Hallo, ich hab folgendes vor, ich würde gerne einen langen Text unter ein Bild setzen, jedoch soll der Text erst auftauchen wenn man auf den Link unter dem Bild klickt, der Text soll dann direkt unter dem Bild erscheinen, wenn man ein zweites mal auf den Link klickt soll der Text sich schließen wieder und wieder verschwinden. hat da vielleicht jemand ein passendes tutorial für mich wie ich das mache?Ich denke es ist mit Dhtml möglich,oder?

 

[Maik]

Hi,

die vorgestellte Technik in dem JS-Tutorial Basic DHTML Menü sollte dir da weiterhelfen.

 

[Hansi321]

Hallo, danke genau sowas suchte ich jedoch kalppt es nicht wenn ich nochmal auf den Link klicke damit der text wieder verschwindet, hätte da jemand eine Idee wie man dass noch machen kann?

 

[teccco]

Hallo,

so könnte dein HTML-Code aussehen:

<img src="meinbild.jpg" alt="mein bild" title="mein bild" />

<a id="trigger" href="linkzurseiteohnejs.html" onclick="zeigebildunterschrift('bildunterschrift_zu_meinbild');return false;">Bildunterschrift anzeigen</a>

<div id="bildunterschrift_zu_meinbild">Meine Bildunterschrift</div>

Um die Bildunterschrift zunächst zu verstecken, definierst du folgende CSS-Eigenschaft für das div-Element mit der ID "bildunterschrift_zu_meinbild":

div#bildunterschrift { display: none; }

Die passende Javascript-Funktion könnte dann so aussehen:

function zeigebildunterschrift(uid) {

   try {

        var unterschrift_container = document.getElementById(uid);
        var trigger = document.getElementById("trigger");

        if (unterschrift_container.style.display == "none") {

             unterschrift_container.style.display == "display";
             trigger.innerText = "Bildunterschrift ausblenden";
        }

        else {

             unterschrift_container.style.display == "none";
             trigger.innerText = "Bildunterschrift anzeigen";
        }
   }

   catch (e) {}
}

MfG, teccco

 

[Maik]

Ansonsten tausche das Script im Tutorial-Demo gegen das hier aus:

function show(id){
d=document;

    if(d.getElementById(id).style.display == 'none') {
        d.getElementById(id).style.display = 'block';
    }
    else {
        d.getElementById(id).style.display = 'none';
    }

}