Einfacher Wechseltext in NetObjects Fusion

[nettesekel]

***Quelle***

In diesem Tutorial möchte ich euch zeigen, wie ihr in NOF einen einfachen Wechseltext erstellen könnt. Wie dieser Text aussehen kann, könnt ihr wie immer auf unserer Demoseite ansehen.
http://demos.nof-community.de/einfacher-wechseltext-in-netobjects-fusion/demo.html

[nettesekel]

Das Erstellen eines solchen Wechseltextes ist eigentlich recht simpel.
Ihr benötigt hierfür eine Einfügung ziwschen den Head-Tags eurer Seite, welche aus etwas CSS und einem kleinen Script betseht und eine Einfügung innerhalb eurer Seite, welche die wechselnden Texte beinhaltet.

Beginnen wir mit der Einfügung des Codes zwischen den Head-Tags eurer Seite. Fügt also den nachfolgenden Code zwischen den Head-Tags eurer Seite und nutzt hierzu - falls nötig - die verlinkte Anleitung.

Die meisten Angaben, die eventuell von euch geändert werden möchten sind im CSS-Code kommentiert. Die gelb gekennzeichnete Zeile ist anzupassen, wenn ihr die Geschwindigkeit des Wechsels zwischen den Texten ändern möchtet.

Code: HTML5

1. <style type="text/css">
2. #dropcontentsubject{
3.     width: 300px; /*Breite der Box*/
4. }
5. .dropcontent{
6.     width: 300px;  /*Breite der Box*/
7.     height: 100px;  /*Höhe der Box*/
8.     border: 1px solid #11385F; /*Rahmenstärke und -farbe/
9.     background-color: #ffffff;  /*Hintergrundfarbe*/
10.     padding: 8px; /*Abstand des Textes zum Rand*/
11.     display:block;
12.     -webkit-box-shadow: 0px 0px 5px #999; /*Schatten*/
13.     -moz-box-shadow: 0px 0px 5px #999; /*Schatten*/
14.     box-shadow: 0px 0px 5px #999 /*Schatten*/
15. }
16. </style>
17.  
18. <script type="text/javascript">
19. var tickspeed=6000 // (6000=6 Sekunden)
20. var enablesubject=0
21.  
22. if (document.getElementById){
23. document.write('<style type="text/css">n')
24. document.write('.dropcontent{display:none;}n')
25. document.write('</style>n')
26. }
27.  
28. var selectedDiv=0
29. var totalDivs=0
30.  
31. function contractall(){
32. var inc=0
33. while (document.getElementById("dropmsg"+inc)){
34. document.getElementById("dropmsg"+inc).style.display="none"
35. inc++
36. }
37. }
38.  
39.  
40. function expandone(){
41. var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
42. contractall()
43. document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
44. selectedDivObj.style.display="block"
45. selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
46. setTimeout("expandone()",tickspeed)
47. }
48.  
49. function startscroller(){
50. while (document.getElementById("dropmsg"+totalDivs)!=null)
51. totalDivs++
52. expandone()
53. if (!enablesubject)
54. document.getElementById("dropcontentsubject").style.display="none"
55. }
56.  
57. if (window.addEventListener)
58. window.addEventListener("load", startscroller, false)
59. else if (window.attachEvent)
60. window.attachEvent("onload", startscroller)
61. </script>

[nettesekel]

Wie bereits angekündigt, benötigt ihr nun noch den Code für den Wechsel-Text. Diesen platziert ihr nach dieser Anleitung in einem Textfeld und bestückt ihn an den gekennzeichneten Stellen mit euren eigenen Texten.

Code: HTML5

1. <div align="center"><div id="dropcontentsubject"></div>
2.  
3. <div id="dropmsg0" class="dropcontent">
4. <div align="left">Hier Text 1 einfügen</div>
5. </div>
6.  
7. <div id="dropmsg1" class="dropcontent">
8. <div align="left">Hier Text 2 einfügen</div>
9. </div>
10.  
11. <div id="dropmsg2" class="dropcontent">
12. <div align="left">Hier Text 3 einfügen</div>
13. </div>
14.  
15. <!-- hier die Codeschnipsel für weitere Texte einfügen, dieser Kommentar kann entfernt werden -->
16. </div>

Für jeden weiteren Text fügt ihr einfach anstelle meines Kommentars
die nachfolgenden 3 Zeilen ein.

Code: HTML5

1. <div id="dropmsg2" class="dropcontent">
2. <div align="left">Hier Text 3 einfügen</div>
3. </div>
4.  

[nettesekel]

Viel Spaß und gutes Gelingen!