Switch Content Tutorial

Ihr benötigt das Javascript von der Seite von “Dynamic Drive” für dieses Skript. Ladet es Euch dort auf Eueren PC runter. Es heißt:

switchcontent.js

In meinem Beispiel hier, habe ich diese .js - Datei in einen Ordner “dynamicscripts” kopiert, den ich seinerseits in dem von NOF bereits vorhandenem Ordner “assets” angelegt habe. Auf diese Datei müsst Ihr im Skript unten dann richtig verlinken. Von einer Unterseite (wie in meinem Beispiel), gebt Ihr die relative Pfadangabe mit 2 Punkten (../), auf der Startseite mit nur 1 Punkt (./), an.

Den Code (unten) kopiert Ihr dann in die Layout-HTML Eurer Seite auf der Ihr das einbaut.

> Layout markieren > Fenster “Layout-Eigenschaften > Button “HTML” > “Zwischen Head Tags” einfügen

<script type="text/javascript" src="../assets/dynamicscripts/switchcontent.js" >

/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

/*Style sheet used for demo. Remove if desired*/
.handcursor{
cursor:hand;
cursor:pointer;
}

</style>

... für das Anzeigen des Skriptes zieht Ihr Euch ein Textfeld auf und fügt Euren Code, den Ihr natürlich entsprechend Euren Bedürfnissen selbst umschreiben müsst, in den “Code-Editor” eines Textfeldes ein.

> im Fenster “Text-Eigenschaften” mittlerer Button oben “Textfeld” > Button “HTML”

Unten mein Code in dem Ihr eigentlich erkennen könnt, wie ich den Text, Bilder oder Links formatiert habe.
Ich habe die Überschriften rot und fett und die Inhalte, die Ihr in Eure Inhalte ändern könnt,
blau und fett markiert. Die Fotos gebe ich auch mit relativen Pfadangaben zu ihrem Standort auf meinem Server an, was ich hier mal gelb und fett markiert habe sowie Links, die ich weiß und fett markiert habe.
Weiterhin habe ich einige Formatvorlagen für meine Bedürfnisse erstellt, hier schwarz und fett markiert.

<div><font size="2"><a href="javascript:bobexample.sweepToggle('contract')">
Alles schließen</a> | <a href="javascript:bobexample.sweepToggle('expand')">Alles sehen</a></font><br><br></div>

<b id="bobcontent1-title" class="handcursor">Was ist Javascript</b><br><br>
<div id="bobcontent1" class="switchgroup1">
JavaScript ist eine Skriptsprache, die ursprünglich von Netscape entwickelt wurde.<br><a href=http://de.wikipedia.org/wiki/JavaScript target="_blank">Hier könnt Ihr mehr lesen</a>.<br><br>
</div>

<b id="bobcontent2-title" class="handcursor">Hier ein Beispiel mit Foto</b><br><br>
<div id="bobcontent2" class="switchgroup1">
Hier mal ein Foto unserer Katze "Alina", das zu einer <i>Foto-Galerie</i> verlinkt ist ...<br><br>
<center><a href="http://www.tommyherrmanndesign.com/nof/html/simpleviewer.html" class="FotoLink" >
<img src="../assets/images/textfotos/2000-12-30.jpg" title="Klick zu meiner Foto-Galerie"
alt="Unsere Katze am 30.12.2000"></a><br><br></center>
</div>

<b id="bobcontent3-title" class="handcursor">Und hier einige Formatierungen</b><br><br>
<div id="bobcontent3" class="switchgroup1">
<b>Hallo,</b> <span class="FarbeRot"> dies ist ein roter Text,</span><span class="FarbeBlauFett"> dies ist ein blauer, fetter Text</span> und jetzt<br>ein Umbruch zu einem Foto unserer Katze "<b>Alina</b>"...<br><br>
<center><img src="../assets/images/textfotos/2007-02-18.jpg" title="Unsere Katze am 18.02.2007"
alt="Unsere Katze am 18.02.2007"></center><br><br>... weiter geht es hier
<a href="http://www.nof-schule.de/forum/" target="_blank">zum Forum</a><br><br>
</div>


<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED

var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="../assets/images/Minus.gif" /> ', '<img src="../assets/images/Plus.gif" /> ')
bobexample.setColor('#183A72', '#657593')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>

nach oben

Viel Erfolg !