Brauche hilfe mit style manipolation.

[ste3et_C0st]

Hallo ich hätte eine frage wie schaff ich es das ein element dauerhaft bei einem mause klick auf none gesetzt wird (div container) [sry ich bin ein noob xD]

Hier ist der code

Html

                    [COLOR=#006400]<!--Login bereich links-->[/COLOR]
<div id="loginleft"  onmouseover="moreaktiv()"  onmouseout="moreinaktiv()">
    </div>


    [COLOR=#006400]<!--Login bereich Hintergrund-->[/COLOR]
        <div id="loginein"  onmouseover="moreaktiv()"  onmouseout="moreinaktiv()">


        [COLOR=#006400]<!--+ symbol-->[/COLOR]
            <div id="more1" onmouseover="moreaktiv()">
                </div>
                    <div id="Mehr">
                        <a>Mehr</a>
                    </div>


                    [COLOR=#006400]<!--+ symbol farbwechsel-->[/COLOR]
                <div id="more2" onmouseout="moreinaktiv()">
            </div>


            [COLOR=#006400]<!--Ausfahren der anmelde console-->[/COLOR]
        <div id="Mehr" onclick="anmelden1()">
    <a class="mehr">Mehr</a>
        </div>


        [COLOR=#006400]<!--Das hier ist das schließen feld-->[/COLOR]
            <div id="close1" onmouseover="moreaktiv()">
                </div>


                [COLOR=#006400]<!-- - symbol-->[/COLOR]
                    <div id="weniger">
                        <a>Weniger</a>
                    </div>
                <div id="close2" onmouseout="moreinaktiv()">
            </div>
            
            [COLOR=#006400]<!-- - symbol farbwechsel-->[/COLOR]
        <div id="weniger" onclick="anmelden1()">
    <a class="mehr">Weniger</a>
</div>

Css code

#loginein
{
display:block;
float:right;
right:3%;
background-image:url(bilder/login/tab_m.png);
background-repeat:repeat-x;
clear:both;
width:10%;
height:9%;
top:0%;
position:absolute;
}


#loginleft
{
display:block;
float:right;
right:6%;
background-image:url(bilder/login/tab_l.png);
background-repeat:no-repeat;
clear:both;
width:10%;
height:10%;
top:0%;
position:absolute;
}


#loginright
{
display:block;
float:right;
right:0.0%;
background-image:url(bilder/login/tab_r.png);
background-repeat:no-repeat;
clear:both;
width:3%;
height:10%;
top:0%;
position:absolute;
}


#more1
{
display:block;
background-image:url(bilder/login/bt_open_none.png);
height:20px;
width:20px;
top:23%;
left:10%;
z-index:800;
position:relative;
background-repeat:no-repeat;
}


#more2
{
display:none;
background-image:url(bilder/login/bt_open_selected.png);
height:20px;
width:20px;
top:23%;
left:10%;
z-index:800;
position:relative;
background-repeat:no-repeat;
}


#close2
{
display:none;
background-image:url(bilder/login/bt_close_selected.png);
height:20px;
width:20px;
top:23%;
left:10%;
z-index:900;
position:relative;
background-repeat:no-repeat;
}


#close1
{
display:none;
background-image:url(bilder/login/bt_close_selected.png);
height:20px;
width:20px;
top:23%;
left:10%;
z-index:900;
position:relative;
background-repeat:no-repeat;
}


#weniger
{
display:none;
position:absolute;
left:40%;
top:23%;
height:20px;
width:20px;
z-index:900;
}


#Mehr
{
position:absolute;
left:40%;
top:23%;
height:20px;
width:20px;
z-index:900;
}


#loginaus
{
display:none;
left:0%;
top:0%;
height:30%;
width:100%;
position:absolute;
z-index:900;
background-repeat: repeat-x repeat-y;
background-image:url(bilder/login/loginbg.png);
}

java code

[COLOR=#006400]//bilder wechsel[/COLOR]
function moreaktiv()
{
document.getElementById('more1').style.display = 'none';
document.getElementById('more2').style.display = 'block';
}


function moreinaktiv()
{
document.getElementById('more1').style.display = 'block';
document.getElementById('more2').style.display = 'none';
}
[COLOR=#006400]//anmelde fenster ausfahren[/COLOR]


function anmelden1()
{
document.getElementById('loginleft').style.top = '30%';
document.getElementById('loginein').style.top = '30%';
document.getElementById('loginright').style.top = '30%';
document.getElementById('loginaus').style.display = 'block';
document.getElementById('more2').style.display = 'none';
document.getElementById('more1').style.display = 'none';
document.getElementById('close2').style.display = 'block';
document.getElementById('close1').style.display = 'block';
}

Also ich hab mir das so vorgestellt das man z.b auf mehr klickt und dan fährt ein login bereich aus das ausfahren ist überhaupt kein problem allerdings hab ich das problem mit meinen + und meinen - symbol (wenn der bereich ausgefahren ist soll das + verschwinden und das - symbol sichtbar werden).

Entweder ich bin zu blöd dazu oder ich hab irgend einen fehler gemacht ihr könnt euc das natürlich auch selber anschauen.

und zwar hier Dicecraft

 

[threadi]

Du hast ein Zeichensatzproblem in deiner Seite:
Markup Validation of http://www.dicecraft.lima-city.de/ - W3C Markup Validator

Wenn man das mal umgeht, sieht man, dass Du 9 Fehler im Code hast die in Zusammenhang mit deiner o.g. Funktion stehen:
[Invalid] Markup Validation of http://www.dicecraft.lima-city.de/ - W3C Markup Validator

 

[ste3et_C0st]

das mit den html problemen ist klar da ich html 5 zum coden benutzt habe das mit java ist mier allerdings neu

 

[threadi]

Die Probleme gelten auch bei Verwendung von HTML5 - der Validator prüft ja genau das.

 

[struppi]

Entweder ich bin zu blöd dazu oder ich hab irgend einen fehler gemacht ihr könnt euc das natürlich auch selber anschauen.

und zwar hier Dicecraft

Du hast einen Fehler gemacht. Fehlermeldungen findest du in der Fehlerkonsole.

 

[ste3et_C0st]

Habs selber hinbekommen es funkioniert jetzt einwandfrei allerdins steh ich gleichzeitig vor einem php problem/mysql

 

[Wustersoss]

Habs selber hinbekommen es funkioniert jetzt einwandfrei allerdins steh ich gleichzeitig vor einem php problem/mysql

Wenn das eine Frage werden soll, empfehle ich dafür einen neuen Faden im richtigen Forum(PHP) zu eröffnen.

 

[struppi]

Habs selber hinbekommen es funkioniert jetzt einwandfrei

Das stimmt nicht, der Fehler ist nach wie vor vorhanden.