Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

Autor Thema: Wechseltext mit Überschrift und Bild  (Gelesen 1940 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Wechseltext mit Überschrift und Bild
« am: 09. Juli 2015, 11:06:56 »
Basierend auf diesem Tutorial möchte ich euch zeigen, wie ihr in NOF einen Wechseltext mit Überschrift und Bild erstellen könnt. Wie das Ganze aussehen kann, könnt ihr wie immer auf unserer Demoseite ansehen.
http://demos.nof-community.de/wechseltext-mit-bild-und-ueberschrift-in-netobjects-fusion/demo.html

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Wechseltext mit Überschrift und Bild
« Antwort #1 am: 09. Juli 2015, 11:08:56 »
Das Erstellen dieses Wechseltextes ist eigentlich nicht schwieriger als bei der ganz einfachen Version. Nur hier ist der Code etwas umfangreicher.
Ihr benötigt auch hierf eine Einfügung ziwschen den Head-Tags eurer Seite, welche aus etwas CSS und einem kleinen Script besteht und eine Einfügung innerhalb eurer Seite, welche die wechselnden Texte mit Bild und Überschrift 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: 600px; /*Breite der Box*/  
  4. }
  5.  
  6. .dropcontent{
  7.     width: 600px;  /*Breite der Box*/
  8.     border: 1px solid #11385F; /*Rahmenstärke und -farbe/
  9.     background-color: #ffffff;  /*Hintergrundfarbe*/
  10.     padding:  10px 20px 30px 20px; /*Abstand des Textes zum Rand - ob, re, un, li */
  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.  
  17. .img_right{
  18. float: right; /* Bildausrichtung rechts*/
  19. padding: 0px 0px 10px 15px; /*Abstand des Textes zum Bild - ob, re, un, li */
  20. }
  21.  
  22. .img_left{
  23. float: left;  /* Bildausrichtung links*/
  24. padding: 0px 15px 10px 0px;  /*Abstand des Textes zum Bild - ob, re, un, li */
  25. }
  26.  
  27. <script type="text/javascript">
  28. var tickspeed=6000 // (6000=6 Sekunden)
  29. var enablesubject=0
  30.  
  31. if (document.getElementById){
  32. document.write('<style type="text/css">n')
  33. document.write('.dropcontent{display:none;}n')
  34. document.write('</style>n')
  35. }
  36.  
  37. var selectedDiv=0
  38. var totalDivs=0
  39.  
  40. function contractall(){
  41. var inc=0
  42. while (document.getElementById("dropmsg"+inc)){
  43. document.getElementById("dropmsg"+inc).style.display="none"
  44. inc++
  45. }
  46. }
  47.  
  48.  
  49. function expandone(){
  50. var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
  51. contractall()
  52. document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
  53. selectedDivObj.style.display="block"
  54. selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
  55. setTimeout("expandone()",tickspeed)
  56. }
  57.  
  58. function startscroller(){
  59. while (document.getElementById("dropmsg"+totalDivs)!=null)
  60. totalDivs++
  61. expandone()
  62. if (!enablesubject)
  63. document.getElementById("dropcontentsubject").style.display="none"
  64. }
  65.  
  66. if (window.addEventListener)
  67. window.addEventListener("load", startscroller, false)
  68. else if (window.attachEvent)
  69. window.attachEvent("onload", startscroller)
  70. </script>
« Letzte Änderung: 09. Juli 2015, 11:18:59 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Wechseltext mit Überschrift und Bild
« Antwort #2 am: 09. Juli 2015, 11:20:48 »
Wie bereits angekündigt, benötigt ihr nun noch den Code für den Wechsel-Text mit Bild und Überschrift. 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="justify">
  5. <h2>Hier Überschrift 1 einfügen</h2>
  6. <img src="../assets/images/2.png" alt="" title="" height="" width="" class="img_right">
  7. Hier Text 1 einfügen</div>
  8. </div>
  9.  
  10. <div id="dropmsg1" class="dropcontent">
  11. <div align="justify">
  12. <h2>Hier Überschrift 2 einfügen</h2>
  13. <img src="../assets/images/3.png" alt="" title="" height="" width="" class="img_left">
  14. Hier Text 2 einfügen</div>
  15. </div>
  16.  
  17. <div id="dropmsg2" class="dropcontent">
  18. <div align="justify">
  19. <h2>Hier Überschrift 3 einfügen</h2>
  20. <img src="../assets/images/4.png" alt="" title="" height="" width="" class="img_right">
  21. Hier Text 3 einfügen</div>
  22. </div>
  23.  
  24. <!-- hier die Codeschnipsel für weitere Texte einfügen, dieser Kommentar kann entfernt werden -->
  25. </div>


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

Code: HTML5
  1. <div id="dropmsg1" class="dropcontent">
  2. <div align="justify">
  3. <h2>Hier Überschrift 2 einfügen</h2>
  4. <img src="../assets/images/3.png" alt="" title="" height="" width="" class="img_left">
  5. Hier Text 2 einfügen</div>
  6. </div>


Diese Zeile ist jeweils für die Anzeige des Bildes verantwortlich.

Code: HTML5
  1. <img src="../assets/images/4.png" alt="" title="" height="" width="" class="img_right">

Hier sind folgende Anpassungen möglich/notwendig:

src="../assets/images/4.png" 
Pfad zum Bild eintragen und dafür sorgen dass die Bilder am angegebenen Ort auf dem Server zu finden sind. Eventuell als Asset einbinden oder von Hand auf den Server kopieren. Bei der Pfadangabe bitte auch auf die gewählte Publizierungs-Struktur achten.

alt="hier den Alttext"

title="hier den Bildtitel"

height="Bildhöhe"

width="Bildbreite"

class="img_right" 
zugewiesene CSS-Klasse img_right für ein rechts ausgerichtetes Bild, img_left für ein links ausgerichtetes Bild
« Letzte Änderung: 09. Juli 2015, 11:36:40 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Wechseltext mit Überschrift und Bild
« Antwort #3 am: 09. Juli 2015, 11:38:18 »
Das sollte es eigentlich gwesen sein. Viel Spaß bei der Umsetzung!

Unterhalb aller unserer Tutorials habt ihr die Möglichkeit diese weiterzuempfehlen. Wir freuen uns, wenn Ihr Gebrauch davon macht. :)

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion