Navigation animieren

Dr. Evil

Teeny

Beiträge

32
22. Mai 2007 um 18:40
- #1
Hallo zusammen,
ich möchte gerne die Navigation meiner Plone-Seite ein bisschen aufpeppen. Und zwar hab ich mir folgendes vorgestellt.
Im Navigationsportlet soll links neben den Links das Bild einer Figur angezeigt werden. Wenn man nun den Mauszeiger auf einen der Links bewegt, soll die Figur auf diesen "zeigen". Hoffentlich kann sich das jeder vorstellen. Es soll genau so aussehen, wie auf dieser Seite: http://www.lfe.mw.tum.de/.
Wie kann man das in Plone umsetzen? Normalerweise macht man das ja mit Javascript. Für jeden Link liegt das passende Bild einer zeigenden Figur auf dem Server und wird bei einem OnMouseOver-Event angezeigt. Das ist aber der Knackpunkt. Beim Erstellen der Seite/Animation muss schon bekannt sein, wie viele Links man später haben möchte. Wie kann man das aber in Plone machen, wo prinzipiell jeder Benutzer eine Unterseite verlinken und somit die Navigation erweitern kann?
Würde mich total darüber freuen, wenn mir da jemand weiterhelfen kann!! Ich bastle da schon ne Zeit rum, komm aber nicht so richtig weiter.
Schöne Grüße,
Dr. Evil
derstappenit

Interessierte/r

Beiträge

132
21. Juni 2007 um 14:21
- #2
hallo,
mit der Lösung musst du eine feste Struktur von der ersten Naviebene haben. Sonst haut das mit dem Bild ja nicht hin. Mit ner Dynamischen Navigation wird es glaub ich gar nicht sauber machbar sein. Du kannst aber natürlich deine eigenen Navigation als Portlet basteln.
Gruß Maik
Schnellere Antworten bekommt Ihr auf der deutschsprachigen Plone-Mailingliste

DERICO - Softwareentwicklung & Consulting Python - Plone - Zope - Pyramid - Django

Calvisiusstr. 3 - 04177 Leipzig - Deutschland Tel: +49 178 8612833 - E-Mail: md@derico.de - Web: http://derico.de
Seawolf-371

Interessierte/r

Beiträge

115
22. Juni 2007 um 10:10
- #3
Es gibt ja Symbole vor der NAviagtion, die kann man per CSS ausschalten, ändern, usw.
pass deine Navigation doch so an sie nur noch ein Bild verwendet (per CSS) und wnen du dann hover "machst" dann ändert sich das bild....
Greetz
Seawolf
mgraf

Meister(in)

Beiträge

316
22. Juni 2007 um 10:48
- #4
Hallo,
Plone ist ein sehr intelligentes Teil, indem es jedem Navipunkt auch einen eigenen Selektor gibt
zB

Code

<div id="portletItem" class="naviPunkt 1"

so kanns du mittels JS und CSS für jeden NaviPunkt einen eigenen HoverEffekt angeben, eines anderen Divs... Stichwort: getElementBy
zusammenbauen darfst du es aber selber, aber so müsste es funktionieren...

lg michi
derstappenit

Interessierte/r

Beiträge

132
22. Juni 2007 um 10:58
- #5
hallo zusammen,
das Problem mit der durch notwendigen statischen Navigation bleibt.
Denn das nette Männlein zeigt an eine bestimmte Stelle für jeden Navigationspunkt. Also braucht man diese vorher um die navigation darauf anzupassen. Unterpunkte können hier das ganze auch wieder zu nicht machen. Von daher eine nette Spielerei aber leider mit sehr vielen Einschränkungen verbunden.
Gruß Maik
Schnellere Antworten bekommt Ihr auf der deutschsprachigen Plone-Mailingliste

DERICO - Softwareentwicklung & Consulting Python - Plone - Zope - Pyramid - Django

Calvisiusstr. 3 - 04177 Leipzig - Deutschland Tel: +49 178 8612833 - E-Mail: md@derico.de - Web: http://derico.de
mgraf

Meister(in)

Beiträge

316
22. Juni 2007 um 11:01
- #6
Stimmt, dynamisch ist das dann natürlich nicht mehr!
Da bei jedem neuen Navipunkt, eine neue CSS-Klasse mit bild angelegt werden muss...
Ich würds entweder lassen, oder die Navigation statisch bauen!
derstappenit

Interessierte/r

Beiträge

132
22. Juni 2007 um 12:39
- #7
das mit den klassen bekommt man schon noch hin, ich sehe das Problem eher bei der Grafik. Diese zeigt auf einen der Navigationspunkte. Die Position des Navigationspunktes muss dabei fix sein. Durch die Dynamic und durch die unterpunkte ist das halt nicht gegeben.
Gruß Maik
Schnellere Antworten bekommt Ihr auf der deutschsprachigen Plone-Mailingliste

DERICO - Softwareentwicklung & Consulting Python - Plone - Zope - Pyramid - Django

Calvisiusstr. 3 - 04177 Leipzig - Deutschland Tel: +49 178 8612833 - E-Mail: md@derico.de - Web: http://derico.de
Dr. Evil

Teeny

Beiträge

32
19. Juli 2007 um 19:48
- #8
Hallo und danke schon mal für eure Ratschläge!
Bin schon lange am Überlegen. Aber ich glaube, dass eine statische Navigation am günstigsten ist! Bin gerade dabei ein kleines (wirklich einfaches) Portlet zu schreiben. Aber bei einer Sache komme ich nicht weiter. Und zwar möchte ich mit Javascript arbeiten. Genauer gesagt soll eine Javascript-Funktion das entsprechende Bild der zeigenden Figur laden und dann anzeigen. Und jetzt kommt das Problem. In Zope hat ja alles (Seiten, Bilder, usw.) Objekt-Charakter. Wie kann ich aber mit Javascript die Bilder (=Objekte) aufrufen? Dafür sind doch normalerweise tal-/python-anweisungen nötig?!?
Schöner Gruß,
Dr. Evil
derstappenit

Interessierte/r

Beiträge

132
19. Juli 2007 um 20:40
- #9
du kannst mit den Bildern arbeiten als wenn du nur html und die bilder im filesystem hättest. Bau einfach dein Portlet mit entsprechendem HTML und Spreche dies per JS an. Auf die Objekte kannt du zwar auch per XMLRPC zugreifen aber das brauchst du hier nicht.
HTML + JS + CSS sind die Lösung für deine Aufgabe.
viel Erfolg,
Gruß Maik
Schnellere Antworten bekommt Ihr auf der deutschsprachigen Plone-Mailingliste

DERICO - Softwareentwicklung & Consulting Python - Plone - Zope - Pyramid - Django

Calvisiusstr. 3 - 04177 Leipzig - Deutschland Tel: +49 178 8612833 - E-Mail: md@derico.de - Web: http://derico.de
Dr. Evil

Teeny

Beiträge

32
19. Juli 2007 um 21:23
- #10
Hallo derstappenit!
Du hast recht!! Mir ist gar nicht aufgefallen, dass das auch funktioniert! Hab nämlich mal was davon gelesen, dass das Dateisystem in Zope/Plone mehr oder weniger tabu ist. Aber ich habs jetzt probiert und es funktioniert! Danke! Das war die Rettung ! Vielleicht werde ich heute doch noch mit meinem Projekt fertig! Vielen herzlichen Dank nochmal!
Schöner Gruß,
Dr. Evil
derstappenit

Interessierte/r

Beiträge

132
19. Juli 2007 um 21:47
- #11
ich hoffe das du jetzt nicht wirklich das dateisystem genommen hast, oder?
du kannst einfach die bilder usw mit dem Pfad ansprechen:
also wenn ein bild bild1.jpg heißt und im custom ordner lieft, dann reicht der name im src. Sonst halt relativ dazu, wobei zope2 auch rekursiv hoch wandert und das bild findet sofert es irgentwo im pfad hoch zum zope-root zu finden ist.
gruß maik
Schnellere Antworten bekommt Ihr auf der deutschsprachigen Plone-Mailingliste

DERICO - Softwareentwicklung & Consulting Python - Plone - Zope - Pyramid - Django

Calvisiusstr. 3 - 04177 Leipzig - Deutschland Tel: +49 178 8612833 - E-Mail: md@derico.de - Web: http://derico.de

20. Juli 2007 um 00:25

Na ja, ich fürchte, ich hab doch das Dateisystem genommen. Am besten, ich poste mal meinen Code (ist nicht so viel).

HTML

<html>


<head>
</head>


<body>
<div metal:define-macro="portlet" class="portlet">
  <script type="text/javascript">
    <!--
     Ramsis0 = new Image();
     Ramsis0.src = "ramsis_menue/ramsis0.gif";
     Ramsis1 = new Image();
     Ramsis1.src = "ramsis_menue/ramsis1.gif";
     Ramsis2 = new Image();
     Ramsis2.src = "ramsis_menue/ramsis2.gif";
     Ramsis3 = new Image();
     Ramsis3.src = "ramsis_menue/ramsis3.gif";
     Ramsis4 = new Image();
     Ramsis4.src = "ramsis_menue/ramsis4.gif";
     Ramsis5 = new Image();
     Ramsis5.src = "ramsis_menue/ramsis5.gif";
     Ramsis6 = new Image();
     Ramsis6.src = "ramsis_menue/ramsis6.gif";
    function Ramsiswechsel(ramsis) {
      document.RAMSIS.src=ramsis.src;
    }
    //-->
  </script>
  <table>
    <tr>
     <td width="100">
      [img]ramsis_menue/ramsis0.gif[/img]
     </td>
     <td>
      <div style="height:40px;">[url='#']Home[/url]</div>
      <div style="height:40px;">[url='#']Lehrstuhl[/url]</div>
      <div style="height:40px;">[url='#']Forschung[/url]</div>
      <div style="height:40px;">[url='#']Lehre[/url]</div>
      <div style="height:40px;">[url='#']Team[/url]</div>
      <div style="height:40px;">[url='#']Links[/url]</div>
     </td>
    </tr>
  </table>
</div>
</body>


</html>

Alles anzeigen

Die Grafiken liegen nicht direkt im custom-Ordner, sondern in einem Unterverzeichnis davon, "ramsis_menue".
Ich musste die Dateiendung immer mit dazunehmen, weil ich sie beim Hochladen der Grafiken auch in der ID angegeben hab. Oder hast du etwas anderes gemeint? Leider kenne ich mich mit den Fachbegriffen noch nicht so gut aus...

Gruß,
Dr. Evil

derstappenit

Interessierte/r

Beiträge

132
20. Juli 2007 um 07:45
- #13
das ist ok, du verwendest so die Objekte im zope, nicht im FS. FS würde bedeuten du nimmst ein Filesystem Produkt, das die Files als Zope-Objekte mapt oder eine separate URL über dne Apache für die Files.
Also alles in Ordnung.
lies mal ein wenig im Plone Buch auf Zope.de oder auf meiner Seite, dann bekommst du einen guten Überblick was geht und was nicht.
Gruß Maik
Schnellere Antworten bekommt Ihr auf der deutschsprachigen Plone-Mailingliste

DERICO - Softwareentwicklung & Consulting Python - Plone - Zope - Pyramid - Django

Calvisiusstr. 3 - 04177 Leipzig - Deutschland Tel: +49 178 8612833 - E-Mail: md@derico.de - Web: http://derico.de

Tags