[rs-hax0r]

Hallo Boardler.
habe eben einmal ein wenig rumgebastelt.
klick
Klickt man auf einen der Buttons lädt die nächste Seite, was ja auch normal ist.
Könnte ich es nicht wie folgt machen:
Alle 5 Div's sind bereits vorhanden, jedoch wird bei klicken auf einen Button jeweils nur der dazugehörige Div sichtbar.

So befände sich die ganze Homepage in einer .html Datei.


2. Könnte ich die Divs dann auch irgenwie "cool" einblenden lassen?

Danke.

[FastEddiFelson]

Würde mal aus dem Stand sagen : Benutz PHP ----> Stichwort : Include.

[rs-hax0r]

Habe mit PHP eigentlich noch nicht so viel gemacht..
Würde zwar auch sicherlich in nächster Zeit folgen, aber vorerst wäre es für mich doch ganz schön schwer.
Oder ist diese Lösung so simpel, dass mir die jemand eben hier hinschreiben könnte?

ps. Hatte im ersten Moment an visibility:hidden, bzw visible gedacht.
Damit lässt sich so etwas nicht umsetzen?

[gamerphil]

wahrscheinlich geht das aber dann musst du noch js benutzen. Wodurch du einige Besucher aussperren würdest!

http://de.php.net/include/

Da werden sie geholfen!

[rs-hax0r]

genau auf der Seite war ich auch schon, nur sah es mir da doch schon relativ kompliziert aus.
Wenn mir nichts anderes möglich bleibt, werde ich mich wohl da einarbeiten müssen.. ^^

[gamerphil]

So kompliziert ist das auch wieder nicht. Ich habs zwar auch noch nicht gemacht, werde aber meine hompage jetzt danach aufbauen!

[keona]

Mit was für einem Programm Arbeitest du denn? In Dreamweaver CS3 ist das sogannante Spry mit drin. Das sind kleine Ajax-Funktionen. Aber man könnte die auch anders herführen als mit Spry.

Ein einfaches ein und ausblenden von divs kann man mit einem umschalter für die css eigenschaften bewirken.

Wenn du im css z.B. den Tag display für deine divs hinzufügst, für das erste dann block nimmst (das wird dann angezeigt) und dann für die anderen none dann hast du schon einmal die grundlage geschaffen.

In deiner HTML Datei musst du dann folgendes im Head einfügen:

<script type="text/javascript">
<!--
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
  var obj = null; with (document){ if (getElementById)
  obj = getElementById(objId); }
  if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");
  }
}
//-->
</script>

das ist das skript um elemten neue Werte zu geben.

Die buttons kannst du dann mit dem Code zu Links machen.

onclick="MM_changeProp('wrapper','','display','none','DIV')"

Wrapper ist in meinem Fall der Name vom DIV, display ist die eigenschaft, none ist der Wert der Eigegnschaft und DIV sagt dem, dass es sich hier um ein DIV handelt.

Ich denke, dass bringt dich einen Schritt weiter.


Falls du des englischen ein wenig mächtig bist, wird dir das hier auch weiterhelfen.

http://blog.paranoidferret.com/index...ade-animation/

[rs-hax0r]

Habe es einmal versucht umzusetzen, jedoch tritt gleich der erste große Fehler auf:
klick
Alle Divs werden angezeigt, jedoch total falsch.
Die dazugehörige .css findet man hier: style2.css

[gamerphil]

Die js Methode ist ja gut und schön - solange man die kacke aktiviert hat.

[keona]

98% aller User haben JS aktiviert.

Bevor du das auf ein Projekt anwendest probiers mit einem einfachen aufbau.

Außerdem musst du ja nicht nur das neue DIV anzeigen lassen, sondern das alte auch ausbleden. Also die Befehle hintereinander ausführen.

Hier mal ein kleines Beispiel von mir http://keona-movie.com/showcase/divs/

[rs-hax0r]

Ich hätte es bisher so:

<map name="navigation" id="navigation">
 <area shape="circle" onclick="MM_changeProp('mainabout','','display','block','DIV')"; MM_changeProp('mainkontakt','','display','none','DIV' coords="66,427,54" alt="Seite 1" title="Über diese Seite" />
 <area shape="circle" onclick="MM_changeProp('mainkontakt','','display','block','DIV')"; MM_changeProp('mainabout','','display','none','DIV' coords="157,336,54"  alt="kontakt" title="Kontakt" />
 <area shape="circle" onclick="MM_changeProp('mainindex','','display','block','DIV')"; MM_changeProp('mainkontakt','','display','none','DIV' coords="248,247,54" target="blank" alt="startseite" title="Startseite" />
 <area shape="circle" onclick="MM_changeProp('mainbio','','display','block','DIV')"; MM_changeProp('mainkontakt','','display','none','DIV' coords="337,157,54" target="blank" alt="Bio" title="Biografie" />
 <area shape="circle" onclick="MM_changeProp('mainlinks','','display','block','DIV')"; MM_changeProp('mainkontakt','','display','none','DIV' coords="427,67,54" target="blank" alt="Seite 5" title="Links" />
</map>

Laut Code wird so aber ja jeweils nur ein Div ausgeblendet.
Wie führe ich denn weitere Divs auf?
Bei klick auf einen Button soll ja ein Div eingeblendet werden, gleichzeitig die restlichen 4 ausgeblendet.

[Dexter]

Zitat von keona

98% aller User haben JS aktiviert.

98% welcher User? Die, die JS aktiv haben und wieder kommen, oder sind in den 2% auch die User interpoliert, die einmal und wegen fehlender Funktionalität und/ oder kaputter Seiten nie wieder kommen? Glaube kaum.
Es gibt keine zuverlässige Methode zu messen, wieviele potentielle User Javascript aktiviert haben.
Hinzu kommt, dass die Hemmschwelle JS zu deaktivieren in Zeiten von Tabbed Browsing, und gleichzeitiger JS-Funktionenschwemme (m.E.) stark im Sinken befindlich ist.

Ich bevorzuge für solche Funktionen übrigens AJAX+Fallback. Auf deutsch: Inhalt wird bei aktivem JS nachgeladen, bei deaktiviertem wird die komplette Seite geholt. (Beispiel: http://trash-wissen.de/ die "Kommentare aufklappen"-Funktion)

rs-hax0r: Zuerst solltest Du mal überlegen, welchen Sinn bei Deinem Problem ein Target ergeben soll.

[rs-hax0r]

Zitat von Dexter

rs-hax0r: Zuerst solltest Du mal überlegen, welchen Sinn bei Deinem Problem ein Target ergeben soll.

Ob mit oder ohne target Attribut, es klappt nicht.

[Dexter]

Zitat von rs-hax0r

Ob mit oder ohne target Attribut, es klappt nicht.

Bis jetzt hab ich nur die nicht funktionierende Version mit Target gesehen.

[rs-hax0r]

kontakt2.html

[rs-hax0r]

Wollte eben nochmal fragen, was bisher meine Fehler sind/waren.
Danke

[SluGGer1]

der link zu deiner datei ist falsch

hab mir aber nochmal deinen zuerst gepostetn angesehn, jetzt scheint ja alles zu klappen
das verfahren mit der imagemap solltest du aber nochmal überdenken....

im übrigen ne hübsche idee das im menü so zu regeln, wenn das design jetzt noch etwas aufgehübscht wird, wirds ne nette seite =)

[rs-hax0r]

Oh, tatsächlich der Link war total falsch.
kontakt2.html

Es klappt noch nicht.
Meine Idee war es ja, nicht die Buttons zu verlinken (das klappt ja bereits), sondern die Divs bei Klick auf den jeweiligen Button einblenden zu lassen. (In der selben, also in einer einzigen .html Datei)

[Dexter]

http://users.skynet.be/mgueury/mozilla/

[rs-hax0r]

Konnte die valide Datei irgendwie nicht uppen, da mein/ein Webspace down ist.
Hier nochmals valide:
kontakt2.html

Probleme/Fragen:
1. Die Klick Funktion der Imagemap geht momentan gar nicht.
2. Wie handle ich das nun mit dem onklick? Ich habe vorerst nur drinstehen (bsp.):

 <area shape="circle" onclick="MM_changeProp('mainindex','','display','block','DIV')" coords="248,247,54" alt="startseite" title="Startseite" />

[SluGGer1]

äh, was auch immer du geändert hast, als ich das erste mal gepostet hatte, liefs bereits auf dem ie7.
Es wurde per klick auf den Knopf das jeweilige div schräg drunter mit Textinhalt eingehängt.
Jetzt gehts nicht mehr, ich hoffe du überarbeitest das Prinzip mit der Imagemap

Ich hab sowas im übrigen auch schonmal gebastelt allerdings als readmore funktion, wie der spoilerbutton hier im board.

hier mal der leicht angepasste code als Beispiel für deine Zwecke :

head Info - Das solltest du mal gelesen haben
--------
<head>
<script type="text/javascript" src="readmore.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>


inhalt der "readmore.js" Info - Das solltest du mal gelesen haben
----------------------


function readmore(classnr)
{
if(document.getElementById("more"+classnr).className == "hidden") {
document.getElementById("more"+classnr).className='show';
} else {
document.getElementById("more"+classnr).className='hidden';
}

}


link fürs div
-------------

<a href="#" class="#" onClick="readmore(1)">div1 öffnen/schliessen</a>
<a href="#" class="#" onClick="readmore(2)">div2 öffnen/schliessen</a>

div Info - Das solltest du mal gelesen haben
---

<div class="hidden" id="more1">Huhu ich bin ein verstecktes div</div>
<div class="hidden" id="more2">ich ebenfalls </div>


Beispiel Stylesheet "style.css" Info - Das solltest du mal gelesen haben
----------

.hidden {
display:none;
visibility:hidden;
}

.show {
visibility:visible;
width:300px;
height:300px;
border:1px solid #000000;
text-align:justify;
font-weight:bold;
font-size:12px;
font-famliy:verdana, sans-serif;
}

evtl hilft dir das ja weiter, damit sollte der ganze spass auch valide werden.

Viel Erfolg beim rumprobierem

[rs-hax0r]

klappt soweit super, danke.

Jedoch habe ich da noch ein paar Fragen.

1. Wie lasse ich den einen Div automatisch schließen, sobald ein anderer geöffnet wird?
2. Wie meinst du "Imagemap" überarbeiten? Sollte ich ganz darauf verzichten? Wie sollte ich sonst runde Buttons verlinken?

Danke

[SluGGer1]

du kannst das bild direkt in den atag einfügen oder als hintergrundgrafik des links per css setzen.
ne imagemap aber ist für den zweck nicht wirklich sinnvoll, du hast ne riesengrafik wo du an bestimmte koordinaten den link platzierst.
das ist nicht nur nen altes verfahren sondern auch unsauber da du halt grosse grafiken verwendest.

wie gesagt , platzier die tags pur mit position auf der page und schmeiss den ganzen imagekram über board, wenn du beim javascript hilfe brauchst damit er nur jeweils eins öffnet und schliesst, kann cih heut nacht nochmal reinschaun und den code anpassen

[rs-hax0r]

Du meinst also, 5 einzelne "Kreise" (buttons) in die entsprechenden Links setzen, damit diese dann verlinkt sind?
Aber sind diese Bilder dann nicht viereckig? Ich hätte es gerne, dass man eben nur auf den runden Teil klicken kann.

ps. Wäre nett, wenn du mit dem javascript nochmals schauen könntest, eilt auch nicht.

[gamerphil]

Zitat von rs-hax0r

Aber sind diese Bilder dann nicht viereckig? Ich hätte es gerne, dass man eben nur auf den runden Teil klicken kann.

Sinn?