onclick wieder schließen?

[Loon3y]

hallo,

mein js mag nicht so wirklich wie gedacht funktionieren. vllt stoß ich hier ein bisschen auf hilfe. habe ein JS das mir beim klicken eines wortes, einen div öffnet (der positioniert ist). Das große problem dabei ist, ich wlil das sich der div auch wieder schließe (bzw "hidden") wenn ich nochmal das wort anklicke, aber das mag er nicht =).

js:

<script type="text/javascript" language="JavaScript">
<!--
var offsetx=20
var offsety=0

function InfoBoxAusblenden() {
      document.getElementById('infobox').style.visibility = "hidden";
}

function InfoBoxAnzeigen(e,txt,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
        document.getElementById("text").innerHTML=txt;
        document.getElementById('infobox').style.left = (PositionX+offsetx);
        document.getElementById('infobox').style.top = (PositionY+offsety);
        document.getElementById('infobox').style.visibility = "visible";
}
// -->

</script>

wort/text

<div id="infobox" style="position:absolute; margin-top: 45px; width: 525px; visibility:hidden;">

         <table bgcolor="#FFFFFF" cellpadding="4">
           <tr>
            <td><span id="text"></span></td>
          </tr>
         </table>

        </div>

        <a class="infobox" 
        OnClick="InfoBoxAnzeigen(event,'I[B]CH BIN DIE BESCHREIBUNG[/B]',20,-30);"
        OnClick="InfoBoxAusblenden();" 
        href="javascript:void(0)">[B]ICH BIN DAS WORT[/B]
        </a>,

 

[Efchen]

Meines Wissens kannst Du nicht den selben EventHandler zweimal benutzen. D.h. Du musst eine Funktion schreiben, die selbst entscheidet, ob Dein Element ein- oder ausgeblendet wird und rufst im EventHandler nur diese eine Funktion auf.

Gruß,
-Efchen

 

[webmatze]

Du könntest die Funktion so abändern:

function InfoBox(e,txt,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
        var infobox = document.getElementById('infobox');

        document.getElementById("text").innerHTML=txt;
        infobox.style.left = (PositionX+offsetx);
        infobox.style.top = (PositionY+offsety);
        infobox.style.visibility = (infobox.style.visibility != "hidden")? "hidden" : "visible";
}

Und diese dann so aufrufen:

<a class="infobox" 
        OnClick="InfoBox(event,'ICH BIN DIE BESCHREIBUNG',20,-30);" 
        href="javascript:void(0)">ICH BIN DAS WORT
        </a>

Dann wird die Box jeweils ein oder ausgeblendet und an der richtigen Position dargestellt.