✔ Vom Prinzip wie in Windows ;)

[Revenge1992]

Hallo erstmal. Ich bin gerade dabei den Aufbau einer Website für einen Freund zu durchdenken. Mir kam folgende Idee, ich möchte eine Art Element einbauen wie in Windows womit sich Texte, Dateien usw. Ein- und Ausblenden lassen (siehe Screen).


Das gleiche Prinzip möchte ich auch haben sprich, dort ist dann ein Pfeil der nach unten zeigt wenn man auf diesen klickt wird der Inhalt eingeblendet, sobald der Inhalt eingeblendet ist sollte dort ein Pfeil sein dessen Spitze nach Oben zeigt und wenn man dann auf diesen Pfeil drückt blendet sich der Inhalt wieder aus.

Ich brauche dringend eine Antwort. Ist das realisierbar? ist mir egal mit welche Codesprache das hinterher gemacht wird aber ich bitte um eine Antwort und am besten direkt einen Code

Dario

 

[Maik]

Hi,

schau mal in das PHP-Tutorial Kategorienübersicht(wie hier im Board).

 

[saftmeister]

Schau dir Plesk an, da wird so was gemacht. Der Beitrag ist hier Offtopic, solche Dinge werden im Browser gemacht, nicht auf dem Server.

 

[Maik]

Der Beitrag ist hier Offtopic, solche Dinge werden im Browser gemacht, nicht auf dem Server.

Das Thema wurde von mir mit der Empfehlung zu dem Tutorial hierher verschoben, da sich solch "dynamischen Prozesse" mit der Auszeichnungssprache HTML nicht realisieren lassen.

 

[saftmeister]

Moin,

ich bin der Meinung, in PHP hat es auch nix verloren, eher in JS. Er will quasi DHTML einbauen. Mal davon abgesehen ginge es mit HTML und CSS ^^

Grüße

 

[Revenge1992]

Moin,

ich bin der Meinung, in PHP hat es auch nix verloren, eher in JS. Er will quasi DHTML einbauen. Mal davon abgesehen ginge es mit HTML und CSS ^^

Grüße

Hallo, wie soll man das mit HTML und CSS realisieren können? Ich bin immer dankbar für Codes ^^

 

[Online-Skater]

Ganz einfaches Beispiel.

<img style="CURSOR: pointer" hspace="3" onclick="if (document.getElementById('1').style.display == 'inline'){ document.getElementById('1').style.display = 'none'; this.src = 'img/icons/plus.gif'; }else{ document.getElementById('nr1').style.display = 'inline'; this.src = 'img/icons/minus.gif';}" src="img/icons/plus.gif" alt="Aufklappbar" />
            related links<br /><br />
<div id="1" style="DISPLAY:none">
// Inhalt
</div>

Man sieht ja wo du deine Grafiken einfügen musst und die ID muss eineindeutig sein.

mfg

 

[Maik]

ID-Namen dürfen aber nicht mit einer Ziffer beginnen.

 

[Maik]

Schau mal in den Thread Wechselnde Grafik (Aufklappbare Menüs - Pfeil nach oben oder unten) - dort findest du von Quaese einen weiteren Lösungsansatz.

Ich schieb das Thema dann mal ins Javascript-Forum.

 

[Westbär]

Ich hab das damals so gemacht.

function openClose(divid, picid) {
    var div=document.getElementById(divid);
    var pic=document.getElementById(picid);
    if(div.style.display == "none") {
        div.style.display="";
        pic.src="img/minus.gif";
    } else {
        div.style.display="none";
        pic.src="img/plus.gif";
    }
}

So sollte es Funktionen.

Beim Image dann nur mehr.

<img src="minus.gif" onclick="javascript:openClose('myDiv',this.src);" />

Und dann noch die ID's beim Image und beim DIV-Container setzen. (id="myDiv" / Div-Container, id="divPic" / Image)

Ich hoffe ich konnte helfen.

Gruß